CSS 3W3C ofera noi optiuni pentru bordere cu ajutorul CSS 3, cum ar fi border-color, border-image, border-radius. Va prezentam mai jos un mic ghid cu ajutorul caruia puteti crea rapid bordere colorate, doar cu ajutorul CSS, fara imagini si alte chestiuni mai complicate de design si css.

Daca aveti un border de 10px inseamna ca puteti folosi 10 culori diferite pentru acel border, fiecare culoare cu width-ul de 1px. Daca folositi doar 5, 6 culori pentru un border de 10px, atunci ultima culoare va ramane definita pentru restul borderului.

Exemplu de border color in CSS3

Codul CSS:

 .my_test {
border: 10px solid #dedede;
-moz-border-bottom-colors: #087a02 #08a500 #0dcc03 #0dcc03 #48ff3f;
-moz-border-top-colors: #087a02 #08a500 #0dcc03 #0dcc03 #48ff3f;
-moz-border-left-colors: #087a02 #08a500 #0dcc03 #0dcc03 #48ff3f;
-moz-border-right-colors: #087a02 #08a500 #0dcc03 #0dcc03 #48ff3f;
padding: 15px 25px;
height: 60px;
width: 500px;
}

Codul HTML:

<div class="my_test">CSS 3 previews - Border color in CSS3</div>

Rezultatul:

CSS 3 previews – Border color in CSS3

Compatibilate cu browsere

In prezent Firefox este singurul browser care are suport pentru border color in CSS3.

Articole similare