One side colored border

Issue

I recently saw this kind of border (source)

I am talking about the left, yellow border. What I find special about it, is that it is completely straight on the right side of it, so you could put a vertical line next to it that would either hit completely or not at all any of the yellow part:

How can one do such a border in CSS? I explicitely do not want to do something like this:

div {
  border-left:5px solid blue;
  border-radius:10px;
  height:50px;
}

<div></div>

If you put a vertical line next to hit, it will hit the edges of the border:

I hope I described it so one can understand it. Otherwise please feel free to edit this post, thanks.

Solution

A simple background will do it:

.box {
 margin:10px;
 width:200px;
 height:100px;
 border-radius:15px;
 background:                     /*width height*/
  linear-gradient(gold 0 0) left/10px   100% no-repeat,
  #f2f2f2;
}

<div class="box">

</div>

Another syntax:

.box {
  margin: 10px;
  width: 200px;
  height: 100px;
  border-radius: 15px;
  background: linear-gradient(to right, gold 10px, #f2f2f2 0);
}

<div class="box">

</div>

Answered By - Temani Afif