Firefox: border-color, la frontera de radio y color de fondo crea bordes irregulares y espacios en blanco

Question

miren el siguiente código HTML y CSS.

.box { 
    border-radius: 15px; 
    border: #333 solid 3px; 
    background: #333; 
} 

<div class="box">Hello world</div> 

Se produce esto en Firefox:

Como se puede ver, la frontera y el fondo de la div deja un pequeño espacio que es visible. Necesito el borde debido a un estado de vuelo estacionario con un color de fondo diferente.

¿Cómo puedo superar esto?

Answer 1

Esto es más probable un error en Firefox. Se podría hacer un truco simple de resolver este problema: (que no es la mejor solución, lo sé, pero el problema parece ser grave)

marcado: una frontera falsa a través de un 'envoltorio' div

<div class="wrapper"> 
    <div class="box">Hello world</div> 
</div> 

css: acolchado hace el truco

.wrapper { 
    border-radius: 15px; 
    background: #333; 
    padding:3px; /*simulating border*/ 
} 
.box { 
    border-radius: 15px; 
    background: #333; 
} 

http://jsfiddle.net/steweb/peYRf/

---

O una forma más elegante de resolver los problemas (sin añadir otro div) podría ser la adición de una sombra en la caja del mismo color de fondo a 'llenar' esas cosas horribles blanco es decir

.box { 
    border:3px solid #333; 
    border-radius: 15px; 
    background: #333; 
    -moz-box-shadow:0px 0px 1px #333; /* just on ffox */ 
} 

http://jsfiddle.net/steweb/Sy2rr/