Border-radius bug in firefox

Question

I've some problem with border-radius function in firefox. When i apply, it makes some kind of space, or border around the item. Can somebody tell me that this is a firefox bug or is there some resolve for that?

Here is the problem: JsFiddle

The

border-radius:50%;

line makes that, i am sure.

Answer 1

Seems to me that this is a FF issue at rendering shadows with border-radius.
You could try this simple trick :

The demo

Basically, you apply the grey shadow on the parent li, make it a bit finer and then move a bit the a.ch-item child in order to make it go over the gap.

.ch-grid > li {
    box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 198px;
    height: 198px;
}
.ch-item {
    position: relative; 
    top: -1px;
    left: -1px;
}

Of course, this is just for the idea. You might also want to apply the hover effect on the li element itself and move it 1px down and right to have a better result.

Edit : a better result