home > tutoriale > html-css > css-border-radius.php
Tutoriale CSS

CSS: border-radius si -moz-border-radius

19 Octombrie de Mihail Alin

In sfarsit designerii nu mai sunt nevoiti sa apeleze la complexe table si grafice pentru a crea efectul de "colturi rotunde" pentru div-uri.In acest tutorial vom explica noile propietati CSS3, border-radius si -moz-border-radius.

Tutorial CSS : border-radius
Autor :   Mihail Alin

Sintaxa border-radius

In primul rand trebuie mentionat faptul ca IE nu suporta border-radius ( mare surpriza , LOL ) , vezi exemplele de mai jos in IE .

Opera Echivalent Mozilla(Firefox si altele) Echivalent WebKit(Safari, Chrome)
border-radius -moz-border-radius -webkit-border-radius
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius

Exemple

Daca folosesti IE atunci o sa vezi casutele de mai jos avand colturi drepte.

Exemple: boder-radius, -moz-border-radius, -webkit-border-radius

Firefox si alte browsere Mozilla:

Exemplul 1 :
-moz-border-radius:12px;
Exemplul 2 :
-moz-border-radius-bottomright:2em;
-moz-border-radius-bottomleft:1em;
Exemplul 3 -moz-boder-radius 2 valori :
-moz-border-radius:1em 3em;
Exemplul 4 :
-moz-border-radius-bottomright:2em;
-moz-border-radius-topright:1em;


Doar in Opera browser:

Exemplul 1 :
border-radius:12px;
Exemplul 2 :
border-top-right-radius:27px;
border-top-left-radius:15px;
Exemplul 3 :
border-radius:3em 0;


WebKit ( Safari, Chrome ) :

Exemplul 1 :
-webkit-border-radius: 12px;
Exemplul 2 :
-webkit-border-bottom-right-radius:1.5em;
-webkit-border-top-left-radius:4em;
Exemplul 3 :
-webkit-border-radius: 5em 1em;


Si bineinteles ca putem sa facem o casuta care sa mearga in toate browserele ( inafara de IE ) :

Exemplul :
-webkit-border-radius: 12px;
-moz-border-radius:12px;
border-radius:12px;
Exemplul 2 :
-moz-border-radius-bottomright:2em;
-moz-border-radius-topright:1em;
border-top-right-radius:1em;
border-bottom-right-radius:2em;
-webkit-border-top-right-radius:1em;
-webkit-border-bottom-right-radius:2em;


Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria HTML & CSS

  Cum sa creezi litere capitale/majuscule cu CSS   -   CSS3 border-radius si -moz-boder-radius   -   Un simplu meniu in CSS si HTML   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa faci un simplu web-site pe 3 coloane   -   Table in HTML   -   Cum sa detectezi ip utilizator   -   Tutorial Jquery pentru incepatori   -   Cum sa faci un ceas cu JavaScript   -   Afisarea datei cu Javascript   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul: