Search code examples
htmlcssstyling

how to apply rounded border to only left side of element

I want to achieve this

expected

But using this css

border-left: 3px solid red;
border-radius: 3px;

It is producing this result

my result

plz ignore spacing, i will add that

Solution

  • Use border-top-left-radius and border-bottom-left-radius

    .div{
margin-top:40px;
  width:50px;
  height:10px;
  border-radius:50px;
  background:red;
  transform:rotateZ(90deg);
}
    <div class="div"></div>