Esquinas redondeadas en un fieldset

Question

Me di cuenta de que la etiqueta "fieldset" representa un borde de esquina redondeada en IE (representa cuadratura en los otros navegadores).

<fieldset> 
     <legend>My legend</legend> 
</fieldset> 

PERO si establezco un estilo CSS en el campo, las esquinas redondeadas desaparecen.

¿Alguien sabe por qué? ¿Cómo mantener las esquinas redondeadas pero con otro color de borde?

[EDIT]: Lo siento por la confusión, no pido cómo tener esquinas redondeadas en Firefox/otros navegadores, quiero saber cómo mantener las esquinas redondeadas en IE y tener otro color de borde (frontera -color: rojo; en el fieldset cambia las rondas a cuadrados ...).

Answer 1

Algunos elementos (botones, cuadros de entrada) están utilizando el sistema de estilos visuales por defecto - y en el defecto temas de Windows XP/Vista, fieldsets han redondeado cor Ners. (Consulte Propiedades de pantalla, por ejemplo.)

Si asigna un estilo a <input />, por ejemplo, perderá sus efectos de desplazamiento, degradados y otras cosas también.

Answer 2

No hay POR QUÉ como tal, no es un secreto que los navegadores se comportan de manera diferente.

¿Ha explorado el atributo -moz-border-radius?

Creo que algo así como

fieldset { 
    -moz-border-radius:5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; //edit :D 
} 

funciona en Firefox/Mozilla, pero ha sido un largo tiempo desde que probé: D

Answer 3

Usted podría utilizar CSS 3 propiedad border-radius, que funcionará en Firefox y Safari:

fieldset { 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
} 

Answer 4

Los bordes en IE son solo redondos cuando 1) Usted tiene el 'Usar estilos visuales en ventanas en botones' habilitado bajo Performance | Pestaña Efectos Visuales. Para decirlo de manera contundente: si tiene habilitada la opción 'XP tematización', se redondeará, cuando tenga el aspecto clásico de Win2000, no se redondeará.

El segundo requisito 2) es "sin CSS relacionado con bordes" para el conjunto de campos. Cada vez que asigna un color de borde, o estilo de borde, o ancho de borde, la 'redondez' se ha ido, no hay una solución para eso. Lo mismo ocurre con la entrada (tanto botones como campos), cuadro de texto y etiquetas de selección. Cada vez que IE no encuentre ninguna temática de CSS para que se represente el control, aplicará el 'tema predeterminado de Windows' al control.

Answer 5

fieldset { 
    -moz-border-radius:5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; //edit :D 
} 

Answer 6

http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

Answer 7

Este sitio tiene una solución para las cuestiones relacionadas con las esquinas redondeadas y de campos IE10. Todavía hay problemas en IE (cara triste). Tienes que hacerlo flotar para que funcione el 100% del tiempo.

fieldset { 
 
    margin: 20px; 
 
    padding: 0 10px 10px; 
 
    border: 1px solid #666; 
 
    border-radius: 8px; 
 
    box-shadow: 0 0 10px #666; 
 
    padding-top: 10px; 
 
} 
 
legend { 
 
    padding: 2px 4px; 
 
    background: #fff; 
 
    /* For better legibility against the box-shadow */ 
 
} 
 
fieldset > legend { 
 
    float: left; 
 
    margin-top: -20px; 
 
} 
 
fieldset > legend + * { 
 
    clear: both; 
 
}

<fieldset> 
 
    <legend>Legend</legend> 
 
</fieldset>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/