Add border to DIV with rounded corners

Question

This seems like it wouldn't be all that hard to do, but I'm having a hard time with it. I just want to add a left border to a div like this:

I tried to add a border-left property (border-left: 5px solid blue;), but that produced this:

Can anyone tell me how to add a border with a straight edge without the rounding at the top and bottom?

Thanks!

Rob G

Answer 1

Hope this helps:

 div { border-radius: 5px; padding: 5px; border-left: 5px #70baff solid; background-color: #f5f5f5; }

 <div> Hello World </div>

Let me know if you have any questions!

Answer 2

you need the parent div to hidding overflow

 .rounded{ border-radius: 7px; overflow: hidden; }.border{ border-left: 6px solid blue; width: 100px; height: 70px; background: lightgray; }

 <div class="rounded"> <div class="border"></div> </div>