Angoli arrotondati su un fieldset

Question

Ho notato che il tag "fieldset" esegue il rendering di un bordo d'angolo arrotondato su IE (viene visualizzato al quadrato sugli altri browser).

MA se si imposta uno stile CSS sul fieldset, gli angoli arrotondati scompaiono !!

Qualcuno sa perché? Come mantenere gli angoli arrotondati ma con un altro colore del bordo?

[EDIT]: Ci scusiamo per la confusione, non chiedo come avere angoli rotondi su Firefox/altri browser, voglio sapere come mantenere gli angoli rotondi su IE e hanno un altro colore del bordo (border -color: rosso; sul fieldset cambia i round ai quadrati ...).

Answer 1

Alcuni elementi (pulsanti, caselle di immissione) utilizzano il sistema di stili di visualizzazione di default - e in difetto temi di Windows XP/Vista, fieldsets hanno arrotondato cor Ners. (Date un'occhiata a Proprietà dello schermo, per esempio.)

Se si assegna uno stile a uno <input />, ad esempio, perderà i suoi effetti al passaggio del mouse, gradienti e altre cose.

Answer 2

Non c'è PERCHÉ in quanto tale, non è un segreto che i browser si comportano in modo diverso.

Hai esplorato l'attributo -moz-border-radius?

Credo che qualcosa di simile

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

opere in Firefox/Mozilla, ma è stato molto tempo da quando ho provato: D

Answer 3

Si potrebbe utilizzare i CSS 3 proprietà border-radius, che funzionerà su Firefox e Safari:

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

Answer 4

I bordi in IE sono arrotondati solo quando 1) Si dispone di 'Usa stili visivi su pulsanti Windows su pulsanti abilitati sotto Prestazioni | Scheda Effetti visivi. Per dirla in modo smussato: se hai "XP theming" abilitato sarà arrotondato, quando avrai il classico look Win2000, non sarà arrotondato.

Il secondo requisito 2) è "no CSS correlato alle frontiere" per il fieldset. Ogni volta che assegni un bordo-colore, o un bordo-stile, o una larghezza del bordo, la 'rotondità' è sparita, non c'è soluzione per questo. Lo stesso vale per l'input (pulsanti e campi), la casella di testo e i tag di selezione. Ogni volta che IE non trova il tema CSS per il controllo per renderlo applica il "tema Windows predefinito" al controllo.

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

Questo sito ha una correzione per le problematiche relative fieldset angoli e IE10 arrotondati. Ci sono ancora problemi in IE (faccia triste). Devi farlo fluttuare per funzionare il 100% del tempo.

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/