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.

http://jsfiddle.net/efrke/2/

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

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -