Własność CSS border

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

• border-width
• border-style
• border-color

Własności obejmowane przez własność border też są własnościami zbiorczymi, odnoszącymi się do wszystkich czterech krawędzi obramowania na raz. Dlatego za jej pomocą można w zwięzły sposób zdefiniować wygląd wszystkich krawędzi elementu, np.:

border: 1px solid black;

Ta deklaracja CSS jest równoważna czterem poniższym:

border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;

A nawet tym dwunastu:

border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
border-right-width: 1px;
border-right-style: solid;
border-right-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: black;

Jak widać, własność zbiorcza border pozwala zaoszczędzić naprawdę dużo pracy.

Przykład

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

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

Efekt:

Poniżej natomiast nadajemy elementowi header podwójne różowe obramowanie o szerokości 10 pikseli.

header {
  border: 10px double lightpink;
}
...
<header>Lorem ipsum dolor sit amet.</header>

Efekt:

Wartości i składnia

Własność border przyjmuje takie same wartości, jak jej własności składowe (wartości ujemne są niedozwolone):

• border-width: liczba z jednostką długości lub słowo kluczowe thin, medium albo thick. Szczegółowy opis tych słów kluczowych znajduje się w opisie własności border-width. Wartość domyślna: medium.
• border-style: słowa kluczowe none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Szczegółowy opis tych słów kluczowych znajduje się w opisie własności border-style. Wartość domyślna: none.
• border-color: dowolny typ wartości koloru CSS. Wartość domyślna: currentcolor.

Własność border przyjmuje jedną, dwie lub trzy z wymienionych powyżej wartości, a ich kolejność nie ma znaczenia, np. wszystkie poniższe deklaracje są równoważne.

border: 10px groove black;
border: black groove 10px;
border: groove 10px black;

Jeśli któraś wartość zostanie pominięta, to nadawana jest jej wartość początkowa. W praktyce oznacza to, że można pominąć tylko ustawienie szerokości i koloru, ponieważ pominięta własność stylu zostanie domyślnie ustawiona na none, co będzie oznaczało brak obramowania.

Zastosowanie

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

Podsumowanie