CSS3 圆角 - 仅边框为圆角，内部盒子仍为正方形

Question

我在其他地方没有看到这个问题，希望有人能帮忙。我有一个带粗边框的div容器。我希望当我将边缘圆角化时，所有边缘都会变成圆角，但只有边框变成了圆角，原始盒子还是方形的。我不想使用图像，我想保持纯CSS。提前感谢！ :)

#dashboard {
margin: 0 auto 53px;
max-width: 100%;
background-color: white;
background-radius: 10px;
border: 30px solid black;
padding: 0px 20px 0px 20px;

border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

-moz-border-top-left-radius: 0px;
-moz-border-top-right-radius: 0px;
-moz-border-bottom-left-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}

- amandathewebdev

---

所有边界都是圆的吗？ - B Woods

这是预期的行为，如果父元素是圆角的，则内部元素将不会被圆角化，除非您将其设置为圆角。 - Grigor

你可能想看看这个答案。 - seth.miller

Answer 1

使用两个嵌套的圆角div。通过包裹中的padding模拟边框。

这是一个示例。

- mreq