所以我有四个盒子，向左浮动，每个盒子的页面宽度为50％。我希望它们的轮廓为1px solid gray，我希望用6px绕过角落。我知道我可以使用border:1px solid gray;和border-radius:6px;，但问题是边框会为元素增加宽度。而且由于盒子的宽度为50％，并且它们向左浮动，我无法为它们添加边框。那么是否有可能将轮廓角落变成圆形？
编辑：CSS-only解决方案最好，因为我需要支持除IE6之外的所有浏览器。
答案 0 :(得分：5)
您仍然可以使用box-sizing对边框执行此操作。它包含元素总宽度中边框的宽度，为fairly supported。
答案 1 :(得分：0)
我的想法是未经测试的，但如何使用50％div作为带边框的实际div的容器？
然后，有边界的div有height和width到auto，并将left，right，top和bottom设置为0px
答案 2 :(得分：0)
有一个workaround as per this answer。但您仍需设置outline:0并使用border-radius和/或box-shadow。
答案 3 :(得分：-2)
使用以下css属性制作圆角边框
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
如果你使用它。请发布您使用的一些代码。然后，只有我们能够找到错误或任何修改需要......
由于
答案 4 :(得分：-2)
控制边框的最好方法是使用 box-shadow 。它保持圆角并且可以在外部或内部（具有插图）。
示例：
box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/
box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/
答案 5 :(得分：-4)
另一种方法是使用OUTLINE属性以及80像素的BORDER-RADIUS。喜欢跟着：
outline: 5px #FFF;
border-radius: 80px;
这适用于小图像，而不是太大的图像。如果您想在较大的图像上使用圆边系统，则必须按照其他人的说法进行操作并使用以下代码：
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;