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!