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ă

cssselector {
  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:

Exemplu

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

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Exemplu

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

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

css#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