how to apply rounded border to only left side of element

I would recommend using pseudo-classes in order to create your red bar. Try this:

span {
  font-family: Arial;
  font-size: 3em;
}

span::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 40px;
  border-radius: 50px;
  background-color: red;
}

<span>2.1 Cr</span>

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>

Edited:

try this

Fiddle file:

https://jsfiddle.net/swuzqpbt/

htmlelement {
  position: relative;
  height: 40px;
  border: none;
  margin: 20px auto;;
}
htmlelement ::before {
    content: '';
    display: inline-block;
    background: red;
    width: 5px;
    height: 40px;
    top: 0;
    left: 0;
    border-radius: 140px;
    position: absolute;
    border:none;
}