Proprietatea border-width

Proprietatea border-width setează grosimea bordurii pentru toate laturile simultan sau separat pentru fiecare latură. Este o proprietate-scurtătură pentru proprietățile border-left-width, border-right-width, border-top-width, border-bottom-width.

Valoarea proprietății poate fi orice unitate de măsură, cu excepția procentelor, sau cuvintele cheie thin (bordură de 2 pixeli), medium (bordură de 4 pixeli) sau thick (bordură de 6 pixeli). Valoarea implicită: medium.

Sintaxă

selector {
	border-width: 1, 2, 3 sau 4 valori;
}

Numărul de valori

Proprietatea poate primi 1, 2, 3 sau 4 valori, specificate prin spațiu:

Număr	Descriere
`1`	Tip pentru toate laturile simultan.
`2`	Prima valoare pentru partea de sus și de jos, a doua - pentru laturile stânga și dreapta.
`3`	Prima valoare pentru partea de sus, a doua - pentru laturile stânga și dreapta, a treia - pentru partea de jos.
`4`	Prima valoare pentru bordura superioară, a doua - pentru dreapta, a treia - pentru jos, a patra - pentru bordura stângă.

Exemplu

Să setăm o bordură cu grosimea de un pixel:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm o bordură cu grosimea de 4 pixeli:

<div id="elem"></div>

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm grosimea bordurii superioare și inferioare la 1px, iar a celei drepte și stângi - la 4px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm grosimea bordurii superioare la 1px, a celei drepte și stângi - la 4px, iar a celei inferioare la 6px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm grosimea bordurii superioare la 1px, a celei drepte la 4px, a celei inferioare - la 6px, iar a celei stângi la 8px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm grosimea bordurii cu cuvântul cheie thin:

<div id="elem"></div>

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm grosimea bordurii cu cuvântul cheie medium:

<div id="elem"></div>

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm grosimea bordurii cu cuvântul cheie thick:

<div id="elem"></div>

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplu

Să setăm o bordură diferită pentru laturi diferite:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Vezi și

proprietatea border-style,
care setează aspectul bordurii
proprietatea border-color,
care setează culoarea bordurii
proprietatea border,
care este o proprietate-scurtătură pentru bordură