html - 边框半径仅围绕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 上的样子。

标签： htmlcss

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>

我希望这可以解决您的问题。