html - tag - Esquinas redondeadas en un fieldset

form html

Question

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

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

¡¡PERO si configuro un estilo CSS en el fieldset, las esquinas redondeadas desaparecen !!

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

[EDITAR]: perdón por la confusión, no pregunto cómo tener esquinas más redondas en Firefox / otros navegadores, quiero saber cómo mantener las esquinas más redondas en IE y tener otro color de borde (color de borde: rojo; el fieldset cambia las rondas a cuadrados ...).

Answer 1

Algunos elementos (botones, cuadros de entrada) están utilizando los estilos visuales del sistema de forma predeterminada, y en los temas predeterminados de Windows XP / Vista, los conjuntos de campos tienen esquinas redondeadas. (Eche un vistazo a Propiedades de pantalla, por ejemplo).

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

Answer 2

Este sitio tiene una solución para los problemas relacionados con las esquinas redondeadas de campo e 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/

Answer 3

Los bordes en IE son solo redondos cuando 1) 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 la frontera" para el conjunto de campo. 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 4

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

¿Has 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 pasado mucho tiempo desde que lo intenté: D

Answer 5

Podría usar la propiedad CSS 3 border-radius, que funcionará en Firefox y Safari:

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

Answer 6

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

Answer 7

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