Własność CSS border-width

> Dodaj do ulubionych

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:

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:

Efekt użycia własności CSS border-width

Wartości

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

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

ZastosowanieWszystkie elementy HTML i pseudoelement ::first-letter
Własności składowe
Obsługiwane wartości
Wartość początkowamedium
DziedziczenieNie
SpecyfikacjaCSS Backgrounds and Borders Module Level 3 – border-width