Artikel: Tutorial Border-radius CSS3

[isshmen]

Tutorial pentru http://www.cwr.ro/showthread.php/15329-articole-tutoriale-din-nisa-de-dezvoltare-web

In acest articol va este prezentata metoda prin care puteti construii un buton, o caseta web avand colturile rotunde cu proprietatea border-radius.

Structura

border-<locatie>-radius:<numar de px> - Pentru Internet Explorer 9, Google Chrome, Safari, Opera
-moz-border-<locatie>-radius:<numar de px> - Pentru Mozilla

General
Daca locatia nu apare, se vor rotunjii toate colturile.
Locatia poate fi:
top left, top right, bottom left, bottom right

top = sus
bottom = jos
left = stanga
right = dreapta

2788

Numarul de px incepe de la numarul 1, nu are o limita la marime

Mai jos sunt niste exemple pentru a putea intelege mai bine

1. Border radius total 5px
278527862787

#1

border:1px #888383 solid;
border-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
-moz-border-radius:5px /*Pentru Mozilla*/

#2

background-color:#00a2ff;
border-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
-moz-border-radius:5px /*Pentru Mozilla*/

#3

border:1px #888383 solid;
background-color:#00a2ff;
border-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
-moz-border-radius:5px /*Pentru Mozilla*/

2. Border radius 2 colturi 5px

278227832784

#1

border:1px #888383 solid;
border-top-right-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
border-bottom-left-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
-moz-border-top-right-radius:5px /*Pentru Mozilla*/
-moz-border-bottom-left-radius:5px /*Pentru Mozilla*/

#2

background-color:#00a2ff;
border-top-right-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
border-bottom-left-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
-moz-border-top-right-radius:5px /*Pentru Mozilla*/
-moz-border-bottom-left-radius:5px /*Pentru Mozilla*/

#3

border:1px #888383 solid;
background-color:#00a2ff;
border-top-right-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
border-bottom-left-radius:5px; /*Pentru Internet Explorer 9, Google Chrome, Safari, Opera*/
-moz-border-top-right-radius:5px /*Pentru Mozilla*/
-moz-border-bottom-left-radius:5px /*Pentru Mozilla*/

Atentie, pentru a putea folosii border-radius, trebuie sa aveti setat un border sau un background anume, border-ul il setati astfel:

border:<numar de px> <culoare> <tip>
Exemplu:

border:1px #000000 solid; - Va aparea o dunga de 1 px in jurul obiectului creat de dumneavoastra.

Background-ul il setati astfel:

background-color:<culoarea>
backround-image:url("<link-ul imaginii>">)
Exemplu:

background-color:#000000; - Obiectul dumneavoastra va fi umplut cu, culoarea neagra.
background-image:url("myimage.png"); - Obiectul dumneavoastra va fi umplut cu imaginea corespunzatoare link-ului setat.