Własność CSS border-left

Własność CSS border-left to własność zbiorcza CSS służąca do ustawiania szerokości, stylu i koloru lewej 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-left 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 lewe o szerokości 5 pikseli:

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

Efekt:

Wartości i składnia

Własność zbiorcza border-left 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-left nie ma znaczenia, wszystkie poniższe deklaracje są prawidłowe i znaczą to samo.

border-left: 5px solid red;
border-left: red solid 5px;
border-left: 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-left: 1px red;

Ta deklaracja jest równoznaczna z tą:

border-left: 1px red none;

Zastosowanie

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

Podsumowanie