一侧彩色边框

Question

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.

Answer 1

A simple background will do it:

 .box { margin:10px; width:200px; height:100px; border-radius:15px; background: /*width height*/ linear-gradient(gold,gold) 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>