CSS3 圆角 - 只有边框是圆角的，内框仍然是方形的
我在其他地方没有看到过这个问题，希望有人能帮忙。我有一个带有粗边框的 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;
}
I haven't seen this question anywhere else, I hope someone can help. I have a div container with a thick border. I was hoping that when I rounded the edges, all edges would round, but only the border rounded, leaving the original box square. I don't want to use an image, I want to keep it pure CSS. Thanks in advance! :)
#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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用两个嵌套的 div，都是圆形的。使用包裹上的填充来模拟边框。
这是一把小提琴
Use two nested divs, both rounded. Simulate border with padding on the wrap.
Here's a fiddle