How to make one border shaped like an ellipse in CSS-CodePudding

I am trying to apply some CSS styles to the left border of a div, so that it could be something like below, which is like an ellipse, other borders (top, right, bottom) are just normal borders

I am able to make it as semi-ellipse with below code, but the other part is still not rounded.

<html>
  <body>
      <div style="border-left: 5px solid #c8c6c4; border-radius: 3.5px; height:120px; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid">
      </div>
  </body>
</html>

I am wondering if there is a way to achieve this in CSS, without adding any element? Thanks in advance!

CodePudding user response：

You can create the same effect using CSS only by adding a before pseudo element and giving it the required width and with the same height as the div.

div {
  height: 120px;
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 100%;
  background-color: #c8c6c4;
  border-radius: 3.5px;
}

<html>

<body>
  <div>
  </div>
</body>

</html>

CodePudding user response：

Building upon the other answers:

div {
  height: 120px;
  width: 200px;
  position: relative;
  margin: 30px;
  border-top: 1px solid #c8c6c4;
  border-bottom: 1px solid #c8c6c4;
  border-right: 1px solid #c8c6c4;
  background: #eee;
}

div::before {
  content: '';
  position: absolute;

  left: -7.5px;
  width: 15px;
  top: -1px;
  bottom: -1px;
  background-color: #c8c6c4;
  border-radius: 15px;
}

<div></div>