示例HTML和CSS：
<div class="progressbar">
<div class="buffer"></div>
</div>
.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }
正如你可以看到我在容器(.progressbar)，but the content (.buffer) goes ‘outside’ the container使用border-radius。我在Google Chrome上看到这个。
这是预期的行为吗？
P.S。这不是关于如何解决它，这是关于它是否应该这样工作。
解决方法
Is this the expected behavior?
是的，疯狂的声音，它实际上是。这里是为什么：
< div>的默认溢出元素(和大多数其他的东西)是可见的，spec说这关于overflow：visible：
visible
This value indicates that content is not clipped,i.e.,it may be rendered outside the block Box.
反过来，§5.3 Corner clipping在“背景和边界”模块中说：
A Box’s backgrounds,but not its border-image,are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also,the area outside the curve of the border edge does not accept mouse events on behalf of the element.
我强调的句子特别提到，框的溢出值必须是除了visible(这意味着自动，隐藏，滚动和其他)之外的东西，以便角落剪切它的孩子。
如果框被定义为具有可见溢出，这就像我说的是大多数视觉元素的默认，那么内容不应该被剪辑。这就是为什么.buffer的正方形角落在.progressbar的圆角上。
因此，在.progressbar的圆角中获取.buffer最简单的方法是在.progressbar中添加一个overflow：hidden样式，如this updated fiddle所示。