W3C ha proposto alcune nuove funzioni per CSS3, uno di questo e la funzione border-radius.
La possibilità di visualizzare gli angoli arrotondati o smusati nelle nostre DIV è per adesso rivolta solo ai browser che ne consentano la corretta visualizzazione: Mozila/Firefox e Safari 3.
Questo è un esempio:

Gli utenti di Mozilla/Firefox e Safari 3 dovrebbero visualizzare un rettangolo con 4 angoli arrotondati.


Il codice utilizzato per realizzare il box qui di sopra:

<div style=" background-color: #3a546d; color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" ></div>

Gli angoli possono essere gestiti anche in modo separato con funzioni specifiche; Mozilla Firefox utilizza comandi differenti come -moz-border-radius-topright in contrapposizione a -webkit-border-top-right-radius

Gli utenti Mozilla/Firefox e Safari 3 dovrebbero visualizzare un rettangolo con angolo arrotondato in alto a sinistra.
<div style="border: 1px solid #000; border-radius-topleft: 10px; -o-border-radius-topleft: 10px; -icab-border-radius-topleft: 10px; -khtml-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; border-top-left-radius: 20px; -o-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -moz-border-top-left-radius: 20px; -webkit-border-top-left-radius: 20px; border: 1px solid #000; padding: 5px 5px 5px 15px; background-color: #3a546d; color: #FFF;"></div>
Gli utenti Mozilla/Firefox e Safari 3 dovrebbero visualizzare un rettangolo con angolo arrotondato in alto a destra.
<div style="border: 1px solid #000; border-radius-topright: 10px; -o-border-radius-topright: 10px; -icab-border-radius-topright: 10px; -khtml-border-radius-topright: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -icab-border-top-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; padding: 5px 5px 5px 15px; background-color: #3a546d; color: #FFF;"></div>
Gli utenti Mozilla/Firefox e Safari 3 dovrebbero visualizzare un rettangolo con angolo arrotondato in basso a sinistra.
<div style="border: 1px solid #000; border-radius-bottomleft: 10px; -o-border-radius-bottomleft: 10px; -icab-border-radius-bottomleft: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; -icab-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; padding: 5px 5px 5px 15px; background-color: #3a546d; color: #FFF;"></div>
Gli utenti Mozilla/Firefox e Safari 3 dovrebbero visualizzare un rettangolo con angolo arrotondato in basso a destra.
<div style="border: 1px solid #000; border-radius-bottomright: 10px; -o-border-radius-bottomright: 10px; -icab-border-radius-bottomright: 10px; -khtml-border-radius-bottomright: 10px; -moz-border-radius-bottomright: 10px;  -webkit-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; -icab-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; padding: 5px 5px 5px 15px; background-color: #3a546d; color: #FFF;"></div>

Ecco tutte le funzioni:

  • -moz-border-radius-topleft / -webkit-border-top-left-radius
  • -moz-border-radius-topright / -webkit-border-top-right-radius
  • -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  • -moz-border-radius-bottomright / -webkit-border-bottom-right-radius