Border – linii in jurul elementelor – tutorial css

Cu css putem adauga marg ini vizibile, marg ini colorizate in jurul fiecarui tag, element html. Aceste margini se numesc border si nu au nici o legatura cu “margin”, care este o delimitare invisibila intre elemente. Putem adauga margini bineinteles doar pe o singura parte a elementelui, a unui paragraf sa zicem, deci nu trebuie ca borderul respectiv sa inconjoare in totalitate elementul.

Border – exemplu

Voi crea un paragraf la care voi adauga un border de o latime de 2 pixeli, si voi da o nuanta rosie border-ului.

Exemplu cod:

<p style="border-style:solid;
border-width:2px;
border-color:#FF0000;
background-color:#333333;
color:#FFFFFF;
padding:10px;
width:500px; height:50px;">
Acest paragraf este inconjurat de un border de 2 pixeli, de o culoare rosie!

</p>

Acest paragraf este inconjurat de un border de 2 pixeli, de o culoare rosie!

Border – border:none – tutorial css

In urmatorul exemplu voi scote pe parte de sus a paragrafulul bor derul, si voi modifica latimea borderului pe partea de jos.

Exemplu cod:

<p style="border-style:solid;
border-width:2px;
border-color:#FF0000;
border-top:none;
border-bottom-width:4px;

background-color:#333333;
color:#FFFFFF;
padding:10px;
width:500px; height:50px;">
Acest paragraf este inconjurat de un border de 2 pixeli, iar pe partea de sus a paragrafului nu este border, pe partea din jos latimea border-ului este de 4 pixeli!
</p>

Acest paragraf este inconjurat de un border de 2 pixeli, iar pe partea de sus a paragrafului nu este border, pe partea din jos latimea border-ului este de 4 pixeli!

border-bottom-color: – tutorial css

In acest exemplu modificam culoarea si latimea borderului de jos!

Exemplu cod:

<p style="border-style:solid;
border-width:2px;
border-color:#FF0000;
border-bottom-color:#000033;
border-bottom-width:6px;

background-color:#333333;
color:#FFFFFF;
padding:10px;
width:500px; height:50px;">
Acest paragraf este inconjurat de un border de 2 pixeli, iar pe partea din jos latimea border-ului a fost modificata sa aiba 6 pixeli latime, si sa fie albastru!

</p>

Acest paragraf este inconjurat de un border de 2 pixeli, iar pe partea din jos latimea border-ului a fost modificata sa aiba 6 pixeli latime, si sa fie albastru!

Cred ca din aceste exemple ati prins ideea cu border-ul, mai sunt multe alte directive prin care se pot stiliza aceste margini, le si voi enumera cateva din cele mai importante:

border-style: solid|dashed|dotted;
border-bottom-style: dashed|etc..
border-top-color: …
boder-left-width:
— si variatiile acestor argumente!