0

There's a similar question here in this link CSS Change color of half of a border but it uses gradient. I have solid colors.

I have a div tag with 300x300 width and height.

I want to give border color similar to this picture:

enter image description here

I have no Idea how can I create such border color

sadsad
  • 23
  • 5

1 Answers1

2

.container {
height: 300px;
width: 300px;
  background: linear-gradient(
    50deg,
    yellow 0%,
    yellow 50%,
    navy 50%,
    navy 100%
  );
padding: 5px;
border-radius: 6px;
}

.container > div { background: #fff; height: 300px; width: 300px;border-radius: 6px; }
<div class="container">
    <div>text inside container</div>
</div>
Nisha
  • 418
  • 2
  • 7
  • thank you so much. I wounder, if it is possible to make color contacting points little smoother? is it possible? like where the navy and yellow contacts each other – sadsad Feb 18 '23 at 11:37