Why does `border-left` influence the shape of ellipse in CSS?

Question

This is one way to create a pair of semicircle:

.shape {
  width: 100px;
  height: 200px;
  border-radius: 50%;       
  background-color: gray;
  border-left: 100px solid black;
}

<div class="shape"></div>

And the div will look like this:

It seems the shape of ellipse will be changed once I add border-left to the div.But I actually don't know why.In my opinion,before I add border-left,the div must be a ellipse.And once I add that,it should look like this:

I mean it should extend the left side to 100px while still keep the shape of ellipse on the right side,making itself an irregular figure.But actually,it just become a pair of semicircle.Why?

Answer 1

I mean it should extend the left side to 100px while still keep the shape of ellipse on the right side,making itself an irregular

This is the purpose of margin not border:

.shape {
  width: 100px;
  height: 200px;
  border-radius: 50%;       
  background-color: gray;
  margin-left: 100px;
}

<div class="shape"></div>

border-radius apply to the whole and consider the border box as reference

Percentages: Refer to corresponding dimension of the border box.^ref

Then you can also read:

The two <length-percentage> values of the border-*-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

So it's clear that 50% in your case will consider 200px for the vertical radius (the height) and will also consider 200px for the horizontal radius (width + border-left) which will give you the logical result of horizontal radius = vertical radius which is a circle.

---

If you want more you can keep reading about how the inner corner should be calculated:

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness

In your case you have 50% (100px) - 100px = 0 so no inner radius in your case that's why the result is border-left curved from one side only.

Decrease the border-width and you will start seeing a curvature:

.shape {
  width: 100px;
  height: 150px;
  border-radius: 50%;
  background-color: gray;
  border-left: 50px solid black;
}

<div class="shape"></div>

Here is an animation to better see the effect of the radius:

.shape {
  width: 20px;
  height:70px;
  border-radius: 50%;
  background-color: gray;
  border-left: 50px solid black;
  animation:change 3s linear alternate infinite;
}

@keyframes change{
  to {
    width:250px;
    height:300px;
  }
}

<div class="shape"></div>

There is a case where the border will not affect the shape. When using box-sizing:border-box. The logic remain the same but in this case, the border is included in the width so the width won't change thus our initial radius will not change.

.shape {
  width: 100px;
  height:200px;
  border-radius: 50%;
  box-sizing:border-box;
  background-color: gray;
  border-left: 0px solid black;
  animation:change 3s linear alternate infinite;
}

@keyframes change{
  to {
    border-width:100px;
  }
}

<div class="shape"></div>

Answer 2

I made a GIF to make you understand better. For this example, I initially removed the border-radius property to remove any bias regarding the mention of "ellipse".

So basically, you are simply adding some border to the CSS Box Model, and afterwards, the border-radius: 50% is transforming it into a circle

https://www.w3.org/TR/css-backgrounds-3/#the-border-radius