Własność CSS border-width

Własność CSS border-width to własność zbiorcza CSS służąca do ustawiania szerokości wszystkich czterech krawędzi obramowania elementu. Jest to własność niedziedziczona, która obejmuje następujące własności obramowania:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Przykład

W tym przykładzie element nav będzie miał zielone przerywane obramowanie o szerokości 5 pikseli:

nav {
  border-width: 5px;
  border-style: dashed;
  border-color: green;
  width: 200px;
}
...
<nav>Lorem ipsum dolor sit amet.</nav>

Efekt:

Wartości

Typy wartości przyjmowane przez własność border-width:

• Liczba z jednostką długości
• Słowa kluczowe: thin (1 piksel), medium (3 piksele), thick (5 pikseli).

Wartością początkową jest medium. Ponadto własność border-width nie może mieć wartości ujemnych.

Składnia

Własność border-width przyjmuje jedną, dwie, trzy lub cztery wartości. Jeśli wartości jest mniej niż cztery, to brakujące są uzupełniane automatycznie wg poniższych zasad:

• Jedna wartość: jeśli zostanie zdefiniowana tylko jedna wartość, to zostanie ona zastosowana do wszystkich czterech krawędzi obramowania, np.:

  border-width: 10px;

  Obramowanie z każdej strony będzie miało szerokość 10 pikseli. To samo, co:

  border-top-width: 10px;
  border-right-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;

• Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do górnej i dolnej krawędzi obramowania, a druga – do lewej i prawej, np.:

  border-width: 10px 20px;

  Górna i dolna krawędź obramowania będą mieć po 10 pikseli szerokości, a lewa i prawa: po 20 pikseli szerokości. To samo, co:

  border-top-width: 10px;
  border-right-width: 20px;
  border-bottom-width: 10px;
  border-left-width: 20px;

• Trzy wartości: jeśli są zdefiniowane trzy wartości, to pierwsza odnosi się do górnej krawędzi obramowania, druga – do lewej i prawej, a trzecia – do dolnej.

  border-width: 10px 15px 20px;

  Górny margines będzie miał 10 pikseli szerokości, lewy i prawy – po 15 pikseli szerokości, a dolny – 20 pikseli szerokości. To samo, co:

  border-top-width: 10px;
  border-right-width: 15px;
  border-bottom-width: 20px;
  border-left-width: 15px;

• Cztery wartości: jeśli są zdefiniowane cztery wartości, to odnoszą się po kolei do górnej, prawej, dolnej i lewej krawędzi obramowania.

  border-width: 5px 10px 15px 20px;

  Górny margines będzie miał 5, prawy – 10, dolny – 15, a lewy 20 pikseli szerokości. To samo, co:

  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;

Zastosowanie

Własność border-width ma zastosowanie do wszystkich elementów HTML, a także do pseudoelementu ::first-letter.

Podsumowanie