Border Radius only rounding the top of a div?

Question

Applying border-radius property on a div with a border only applies it to the top corners. Why is that?

Example:

https://jsfiddle.net/07tqbo56/1/

.asd {
  margin-top: 35px; 
  width: 123px;
  border-top-style: solid; 
  border-top-color: #1163b9; 
  border-top-width: 70px; 
  border-radius: 70px;
}

<div class="asd"></div>

This is how it looks like on Firefox 72, Ubuntu 19.

Answer 1

This is happening because your other border properties are only being applied to the top border, for example, border-top-style needs to be just border-style.

When only one border is solid, some browsers apply border-radius to just that border, while others still apply it to all borders.

.asd {
  margin-top: 35px; 
  width: 123px;
  border-style: solid; 
  border-color: #1163b9; 
  border-width: 70px; 
  border-radius: 70px;
}

<div class="asd"></div>

Answer 2

Not only in FireFox, it will look like that in all browsers,

Are you trying to do like this?

Just deleted the "Top" in border-style, -color and -width. "Top" will do the changes only on the top of the design.

.asd {
  margin: 35px; 
  width: 123px;
  border-style: solid; 
  border-color: #1163b9; 
  border-width: 70px; 
  border-radius: 70px;
}

<div class="asd"></div>

I hope this would have solved your problem.