Własność CSS border-bottom

Własność CSS border-bottom to własność zbiorcza CSS służąca do ustawiania szerokości, stylu i koloru dolnej 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-bottom też są własnościami zbiorczymi, odnoszącymi się do wszystkich czterech krawędzi obramowania na raz.

Przykład

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

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

Efekt:

Wartości i składnia

Własność zbiorcza border-bottom przyjmuje jedną, dwie lub trzy wartości odnoszące się do obejmowanych przez nią własności. Ich kolejność jest bez znaczenia. Jeśli brakuje jednej lub dwóch wartości, to automatycznie stosowane są wartości domyślne dla danych ustawień.

• 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.

Ponieważ kolejność wartości we własności border-bottom nie ma znaczenia, wszystkie poniższe deklaracje są prawidłowe i znaczą to samo.

border-bottom: 5px solid red;
border-bottom: red solid 5px;
border-bottom: solid 5px red;

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, np.:

border-bottom: 1px red;

Ta deklaracja jest równoznaczna z tą:

border-bottom: 1px red none;

Zastosowanie

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

Podsumowanie