Question

Here’s my fiddle: http://jsfiddle.net/edelman/NJHLU/

Basically, if there’s a border radius on an element with a border, the border and background don’t actually touch, creating a little inner white circle that looks stupid crappy.

Things I’ve tried that haven’t worked:

• background-clip and all of the possible values
• overflow: hidden
• border-collapse with both values

Nothing seems to work. Is this just a FF rendering bug that I have to just deal with?

I have seen this question, but I don’t have the luxury of wrapping, as I’m doing this CSS on generated content (:before pseudo element)

EDIT: I have also tried using box-shadow in lieu of a border, but that has the same problems.

Answer 1

You could use the technique described in the answer you linked to. Add a FF hack:

-moz-box-shadow:0px 0px 0px #2eb8ae;