边框半径仅围绕div的顶部？

Question

在带边框的 div 上应用border-radius 属性只会将其应用到顶角。这是为什么呢？

例子：

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>

这就是它在 Firefox 72、Ubuntu 19 上的样子。

Answer 1

不仅在 FireFox 中，在所有浏览器中都会如此，

你想这样做吗？

刚刚删除了border-style, -color and -width 中的“顶部”。 "Top" 只会在设计的顶部进行更改。

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

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

我希望这能解决您的问题。

Answer 2

发生这种情况是因为您的其他 border 属性仅应用于顶部边框，例如，border-top-style 只需为 border-style。

当只有一个边框是solid 时，一些浏览器将border-radius 应用于该边框，而其他浏览器仍将其应用于所有边框。

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

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

Answer 3

像这样定义 CSS

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

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