CSS3圆角 - 仅边框为圆形,内框仍为方形

时间:2012-01-13 19:28:57

标签: css css3 rounded-corners web-frontend

我还没有在其他任何地方看过这个问题,我希望有人可以提供帮助。我有一个带有粗边框的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;
}

1 个答案:

答案 0 :(得分:3)

使用两个嵌套的div,两个都是圆形的。用包裹上的填充物模拟边框。

这是a fiddle