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:
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.:
Obramowanie z każdej strony będzie miało szerokość 10 pikseli. To samo, co:
- 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.:
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:
- 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.
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:
- 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.
Górny margines będzie miał 5, prawy – 10, dolny – 15, a lewy 20 pikseli szerokości. To samo, co:
Zastosowanie
Własność border-width
ma zastosowanie do wszystkich elementów HTML, a także do pseudoelementu ::first-letter
.
Podsumowanie
Zastosowanie | Wszystkie elementy HTML i pseudoelement ::first-letter |
---|---|
Własności składowe | |
Obsługiwane wartości |
|
Wartość początkowa | medium |
Dziedziczenie | Nie |
Specyfikacja | CSS Backgrounds and Borders Module Level 3 – border-width |