Własność CSS border-top

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

Przykład

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

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

Efekt:

Wartości i składnia

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

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

Ta deklaracja jest równoznaczna z tą:

border-top: 1px red none;

Zastosowanie

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

Podsumowanie