CSS3 圆角 - 只有边框是圆形的，内框仍然是方形的答案

【问题标题】：CSS3 rounded corners - only border is rounded, inner box still squareCSS3 圆角 - 只有边框是圆形的，内框仍然是方形的
【发布时间】：2014-07-09 21:56:20
【问题描述】：

我没有在其他地方看到这个问题，我希望有人能提供帮助。我有一个带有粗边框的 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;
}

【问题讨论】：

边框的所有边都是圆形的？
它应该是这样的，如果你的父母是圆形的，里面不会被圆形，除非你把它变成圆形jsfiddle.net/4tqLQ/3
你可能想看看this answer。

标签： css rounded-corners web-frontend

【解决方案1】：

使用两个嵌套的 div，都是四舍五入的。用包装上的填充模拟边框。

这里是a fiddle

【讨论】：