Border Radius Box în CSS3, tutorial

Cu ajutorul proprietăţii Border Radius în CSS3 se pot crea casete cu colţuri rotunjite fără a avea nevoie de nici o imagine, totul se face din CSS.
Proprietatea Border Radius funcţioneaza pentru versiunile superioare de browsere: Firefox 3.0, Safari 3.1, si Chrome.
Internet Explorer este exclus, ar fi trebuit implementat si in Opera 10 dar am constatat ca nu merge deocamdata.
Nici in Chrome nu merg decât primele 2 exemple.

Începem prin a crea HTML-ul pentru un BOX:

<div id="box"></div>

Si css-ul aferent:

#box {
width:400px;
height:100px;
background-color:#91C8FF;
}

De unde rezultă o casetă normală cu colţuri drepte:

Un Border Radius se poate concepe în mai multe feluri adăugând în CSS o singură linie, în funcţie de ce dorim să obţinem. De fapt doua linii, una pentru Firefox si alta care este de fapt acelasi lucru pentru Safari si Chrome. E necesar deoarece CSS3 nu este inca un standard.
Mai jos urmează 7 exemple care sper să vă convingă de utilitatea proprietăţii Border Radius.

#box { -moz-border-radius: 20px; } /*pt Firefox*/
#box { -webkit-border-radius: 20px; } /*pt Safari si Chrome*/

#box { -moz-border-radius:20px 40px; } /*pt Firefox*/
#box { -webkit-border-radius:20px 40px; } /*pt Safari si Chrome*/

#box { -moz-border-radius:20px 40px 5px; } /*pt Firefox*/
#box { -webkit-border-radius:20px 40px 5px; } /*pt Safari si Chrome*/

#box { -moz-border-radius:10px 20px 30px 40px; } /*pt Firefox*/
#box { -webkit-border-radius:10px 20px 30px 40px; } /*pt Safari si Chrome*/

#box { -moz-border-radius-topright: 30px; } /*pt Firefox*/
#box { -webkit-border-radius-topright: 30px; } /*pt Safari si Chrome*/

#box { -moz-border-radius-topleft: 30px; } /*pt Firefox*/
#box { -webkit-border-radius-topleft: 30px; } /*pt Safari si Chrome*/

#box { -moz-border-radius: 30px / 15px; } /*pt Firefox*/
#box { -webkit-border-radius: 30px / 15px; } /*pt Safari si Chrome*/

La ce se poate folosi o asemenea casetă?
La multe, mai jos un exemplu.
Si css-ul complet utilizat pentru a printa ce se vede.

#box {
width:400px;
height:100px;
background-color:#91C8FF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
line-height:1.2em;
padding:10px;
border:3px solid #0000FF;
}

 
Tutorial este tradus şi adaptat după: bloggingcss.com

Am testat functionalitatea Border Radius in Firefox 3.5.6, Chrome last vers, Netscape.

În browserele la care nu funcţionează, la toate exemplele de mai sus de casete cu colţuri rotunjite, colţurile se văd drepte la 90 grade.

Eventual vă rog lăsaţi un comentariu pentru alte tipuri de browsere, sisteme de operare, pentru e se cunoaşte cu exactitate problema. Teoretic ar trebui să meargă şi pe Safari/MAC dar n-am MAC, n-am cum sa ştiu.