边框半径仅四舍五入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. “顶部”只会在设计的顶部进行更改。

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

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

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