Esquinas redondeadas en Firefox: espacio entre el borde y el fondo

Tengo un div al que le estoy aplicando esquinas redondeadas.Esquinas redondeadas en Firefox: espacio entre el borde y el fondo

Aquí está mi demo fiddle.

<div>&nbsp;</div>

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #4c66a1; 
    border: 2px solid #4c66a1; 
}

que también tienen un color de borde y el fondo aplicado a este div. El problema surge en Firefox. Hay una pequeña cantidad de espacios en blanco entre el borde y el color de fondo del div (ver imágenes a continuación). Es muy mínimo, pero la gente lo ha notado de todos modos. Parece un efecto de iluminación en la esquina.

¿Es este un problema conocido con las esquinas redondeadas en Firefox? IE, Chrome y Opera están bien.

FYI/A fin de ilustrar el problema, he hecho que el borde y el color de fondo sean los mismos aunque sea redundante. Hace que los espacios en blanco se destaquen más.

 Firefox  Chrome/IE/Opera

enter image description here

Fuente

2012-03-06 Matt K

no se reprodujo cuando cambié el color a rojo – FosterZ

@FosterZ: Red todavía lo hace por mí. Simplemente menos notable. Mueva el radio hasta 50 y lo verá, casi. Edición: en realidad, todavía puedo verlo a los 15, Eagle me mira;) – musefan

Sí, es por eso que utilicé colores similares en la muestra para ilustrar mejor el problema. Los colores brillantes le quitarán la vista y el problema es mucho menos notorio. si realmente quieres verlo, trata de crear un círculo usando border-radius. el espacio en blanco rodeará todo el div. –

Curiosamente, si cambiamos a puntos, el blanco desaparece:

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    -khtml-border-radius: 30px; 
    border-radius: 30px; 
    background-color: #4c66a1; 
    border: 2px dotted #4c66a1; 
}

http://jsfiddle.net/5yAkZ/23/

EDITAR tenía CSS válido previamente

Fuente

2012-03-06 18:03:53 Chris

que no es válido css. tienes que especificar un estilo o el borde ni siquiera se mostrará. –

Tiene razón, lo que tenía no era válido. Sin embargo, si lo cambiamos a punteado, el problema parece desaparecer (al menos en mi extremo): actúa como un error con bordes sólidos redondeados. – Chris

wow, realmente buena captura! de esto hice algo de experimentación y descubrí que si usas el estilo 'double' ... el problema está solucionado. como mi borde es solo '2px', en realidad no puedes detectar el borde doble, solo se nota en>' 3px' donde se divide en 2 bordes distintos. ¡Muchas gracias por su ayuda! Esto se debe archivar en un informe de error en alguna parte ... –

mira esto es esto que quiere JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div>

#ex1{ 
    border-radius: 50px; 
    height: 200px; 
    width: 200px; 
} 
.exampleRound { 
    background: none repeat scroll 0 0 #4c66a1; 
    border: 5px solid pink; 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: 30px; 
    padding: 20px 40px; 
    margin:20px 
}

Fuente

2012-03-06 17:57:38 FosterZ

apague esos colores brillantes para obtener tonos más suaves y el problema persiste. –

:) dime los colores, porque no puedo verlo ahora ... – FosterZ

Ver https://bugzilla.mozilla.org/show_bug.cgi?id=704399 que se fija en Firefox 11 y más nuevo.

Fuente

2012-03-07 03:51:00

Esquinas redondeadas en Firefox: espacio entre el borde y el fondo

Respuesta

Cuestiones relacionadas