圆形元素的纯色边框

Question

我希望在具有border-radius: 10px 0 0 10px（左上角，左下角）的元素上使用左边框。但是对于正常的border-left: 10px solid black，它看起来并不是真的圆（就像我的意思是圆圈）。这是the fiddle。

似乎浏览器首先添加实线边框，然后围绕整个元素，包括实线边框。 但我需要反过来和圆形的固体边框。

Answer 1

可以使用框阴影来获得更圆的边框。

http://codepen.io/Spaceman/pen/ejDJK

#rounded {
    background: lightblue;
    border-radius: 10px 0 0 10px;
box-shadow: -5px 0px 1px 0px #000000;
    height: 100px;
    padding: 10px;
}