Coins arrondis sur un fieldset

Question

J'ai remarqué que la balise "fieldset" restitue une bordure de coin arrondie sur IE (elle rend le carré sur les autres navigateurs). MAIS si je mets un style CSS sur le fieldset, les coins arrondis disparaissent !!

Quelqu'un sait pourquoi? Comment garder les coins arrondis mais avec une autre couleur de bordure?

[EDIT]: désolé pour la confusion, je ne demande pas comment avoir des coins ronds sur FireFox/autres navigateurs, je veux savoir comment garder les coins ronds sur IE et ont une autre couleur de frontière (frontière -color: rouge, sur le fieldset change les rounds en carrés ...).

Answer 1

Certains éléments (boutons, boîtes d'entrée) utilisent les styles visuels système par défaut - et par défaut les thèmes Windows XP/Vista, fieldsets ont arrondi cor ners. (Regardez par exemple les propriétés d'affichage.)

Si vous attribuez un style à un <input />, par exemple, il perdra aussi ses effets de survol, ses dégradés et autres.

Answer 2

Il n'y a pas de POURQUOI en tant que tel, ce n'est pas un secret que les navigateurs se comportent différemment.

Avez-vous exploré l'attribut -moz-border-radius?

Je pense que quelque chose comme

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

œuvres dans FireFox/Mozilla, mais il a été longtemps que j'ai essayé: D

Answer 3

Vous pouvez utiliser CSS 3 propriété border-radius, qui travaillera sur Firefox et Safari:

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

Answer 4

Les bordures dans IE ne sont arrondies que lorsque 1) Vous avez activé l'option 'Utiliser les styles visuels sur les fenêtres sur les boutons' sous Performance | Onglet Effets visuels. Pour parler franchement: si vous avez activé le thème XP, il sera arrondi, quand vous aurez le look classique de Win2000, il ne sera pas arrondi.

La deuxième exigence 2) est 'CSS non lié aux frontières' pour l'ensemble de champs. Chaque fois que vous affectez une couleur de bordure, un style de bordure ou une largeur de bordure, l'arrondi est parti, il n'y a pas de solution pour cela. Il en va de même pour l'entrée (à la fois les boutons et les champs), la zone de texte et les tags de sélection. Chaque fois que IE ne trouve aucun thème CSS pour le contrôle à rendre, il appliquera le «thème Windows par défaut» au contrôle.

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

Ce site a une solution pour les questions relatives aux coins arrondis et fieldset IE10. Il y a encore des problèmes dans IE (visage triste). Vous devez faire flotter pour travailler 100% du temps.

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/