css - 补偿 Safari 的边框半径绘图

Question

观察下面的简单示例:

div {
  border-bottom: 1px solid black;
  border-radius: 20%;
  padding: 10px;
}

<div>Test</div>

在 Safari 中，这会导致绘制部分上边框:

我不想要那些“重影”的上边界。我该如何对此进行补偿？

Answer 1

您需要删除 div 顶部的圆 Angular 边框，如下所示:

div {
    border-bottom: 1px solid black;
    border-radius: 0 0 20% 20%;
    padding: 10px;
}

这是使用带有 4 个值的 border-radius 简写

first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner"

https://www.w3schools.com/cssref/css3_pr_border-radius.asp