Box and shadow error

Question

Css causing the "error":

div { width: 100px; height: 100px; background-color: transparent; box-shadow: 0 0 15px 20px #000 inset; border: 100px solid #000 ; border-radius: 150px; } 

There seems to be some kind of transparent 1px border between the insert shadow and the outer border.

Check out this live example , I can reproduce this visualization with the latest releases of Chrome, Firefox and IE. (thus independent of engine)

And this does not happen with a lower border radius (in other words, this does not happen when the shape is not a circle)

EDIT:

I have not found a way to remove this thing, but using low opacity makes it almost invisible. I use this technique (and leave the question open) until a real solution appears.

Answer 1

Definitely looks like an error in shadow-shadow (when using arg spread). In the process, just use the overlay div. Here is the code:

HTML:

 <div></div> <div class="overlay"></div> 

CSS

 div { margin:10px; width: 100px; height: 100px; background-color: transparent; box-shadow: 0 0 15px 20px #000 inset; border: 100px solid #000 ; border-radius: 150px; } div.overlay { margin-top:-310px; } 

Here's the fiddle: http://jsfiddle.net/eX3cy/1/

Edit:

Here you can also customize the fiddle with blur and spread (to show that identical results, minus unwanted parts, can be achieved): http://jsfiddle.net/wgpzL/