css - A circle with inside and out side box-shadow have 1px border -
i have circle have both inside , outside box-shadow,but there 1px unwanted border.anyone can me remove border , tell me why happening circle.
here code html
<div class="wrapper"> <div class="circle"></div> </div>
css
.wrapper{padding:30px;} .circle{ width:120px; height:120px; border-radius: 50%; box-shadow:inset 0 0 0 16px #f9f9f9, 0 0 0 16px #f1f1f1; background:#32a500;}
you can find on fiddle.
i think box-shadow: inset
messing border-radius
.
while waiting other solutions, can avoid using inset
, apply instead border
, removing manually 32px (16px + 16px) height , width of div;
demo: http://jsfiddle.net/efrke/3/
code:
.wrapper{padding:30px;} .circle{ border-radius: 50%; background:#32a500; box-shadow: 0px 0px 0px 16px #f1f1f1; border: 16px solid #f9f9f9; width:88px; height:88px; }
Comments
Post a Comment