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

  CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Centrarea paginii cu CSS   -   Cum sa inserezi un sunet/melodie intr-o pagina   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   Centrarea paginii cu CSS   -   Cum sa detectezi ip utilizator   -   Tutorial Jquery pentru incepatori   -   Ferestre in Javascript/popups   -   Verificare formular cu JavaScript   -   Efecte de mergini in PhotoShop   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

1 comenturi pana acum... (posteaza si tu)

asa de stresant este IE-ul asta , Microsoft este firma de multi-milioane de euro si nu sunt in state sa isi duca browser-ul la standarde .

Postat de Andi pe data de: Tuesday, 01.18.11 @ 18:25pm

Comentarii:

Nume:

Email:

Comentariu:
 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...
 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s
 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.