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; }