Właściwość zbiorcza border w CSS

9.13. Właściwość zbiorcza `border`

Strona główna > Kurs CSS > Rozdział 9: Tła i Obramowania > Właściwość zbiorcza border

Wprowadzenie: Ustawianie obramowania w jednej linii

Podobnie jak w przypadku tła (background), CSS oferuje również właściwość zbiorczą (shorthand) dla obramowania: border. Pozwala ona ustawić **szerokość, styl i kolor** obramowania dla **wszystkich czterech krawędzi jednocześnie** w jednej, zwięzłej deklaracji.

Jest to najczęściej stosowany sposób definiowania prostego, jednolitego obramowania.

Składnia właściwości `border`

Właściwość border przyjmuje od jednej do trzech wartości, które określają:

border-width (opcjonalne, domyślnie medium)
border-style (wymagane, aby obramowanie było widoczne)
border-color (opcjonalne, domyślnie currentColor)

Kolejność tych trzech wartości **nie ma znaczenia**. Przeglądarka sama rozpozna, która wartość odpowiada szerokości, stylowi, a która kolorowi.

/* Przykłady użycia shorthandu border */

/* Najprostszy przypadek: styl (szerokość=medium, kolor=currentColor) */
.element1 {
  border: solid;
  color: green; /* Obramowanie będzie zielone */
}

/* Styl i kolor (szerokość=medium) */
.element2 {
  border: dashed blue;
}

/* Styl i szerokość (kolor=currentColor) */
.element3 {
  border: dotted 5px;
  color: orange; /* Obramowanie będzie pomarańczowe */
}

/* Szerokość, styl i kolor */
.element4 {
  border: 2px solid #333; /* Najczęstszy zapis */
}

/* Inna kolejność - działa tak samo */
.element5 {
  border: red thick double; 
}

Ważne: Właściwość border ustawia te same wartości dla **wszystkich czterech krawędzi**. Nie można za jej pomocą ustawić różnych stylów, szerokości czy kolorów dla poszczególnych krawędzi (do tego służą indywidualne właściwości lub shorthandy dla poszczególnych krawędzi, np. border-top).

Resetowanie wartości

Podobnie jak inne właściwości zbiorcze, użycie border resetuje do wartości domyślnych te właściwości składowe (border-width, border-style, border-color), które nie zostały jawnie podane w shorthandzie.

Na przykład, jeśli wcześniej ustawiłeś border: 5px solid red;, a następnie użyjesz border: dashed;, to szerokość zostanie zresetowana do medium, a kolor do currentColor.

Jeśli chcesz zmienić tylko jeden aspekt obramowania (np. tylko kolor), użyj odpowiedniej indywidualnej właściwości (border-color).

Shorthandy dla poszczególnych krawędzi

Oprócz głównego shorthandu border, istnieją również właściwości zbiorcze dla każdej z krawędzi:

border-top
border-right
border-bottom
border-left

Każda z nich przyjmuje od jednej do trzech wartości (szerokość, styl, kolor) w dowolnej kolejności, ale dotyczą one **tylko tej konkretnej krawędzi**.

.specific-borders {
  /* Ustawienie tylko górnego obramowania */
  border-top: 3px solid blue;

  /* Ustawienie tylko dolnego obramowania (inny styl) */
  border-bottom: 1px dashed gray;

  /* Usunięcie lewego i prawego obramowania (jeśli były wcześniej) */
  border-left: none;
  border-right: none;

  padding: 20px;
}

Używanie tych shorthandów jest często wygodniejsze niż stosowanie indywidualnych właściwości typu border-top-width, border-top-style, border-top-color, gdy chcemy zdefiniować całe obramowanie dla jednej krawędzi.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Użyj właściwości zbiorczej border, aby nadać elementowi div ciągłe, czarne obramowanie o grubości 1px.

Rozwiązanie:

HTML:

<div class="simple-border">Proste obramowanie</div>

CSS:

.simple-border {
  padding: 15px;
  border: 1px solid black; /* Kluczowa właściwość */
}

Efekt: Element będzie miał cienkie (1px), ciągłe, czarne obramowanie ze wszystkich stron.

Zadanie 2 (do samodzielnego wykonania)

Użyj właściwości zbiorczej border, aby nadać elementowi div kropkowane, czerwone obramowanie (użyj domyślnej szerokości medium).

Zadanie 3 (do samodzielnego wykonania)

Użyj shorthandów dla poszczególnych krawędzi (border-top, border-bottom), aby nadać elementowi div tylko górne i dolne obramowanie (np. 2px solid gray), bez obramowania po bokach.

FAQ - Najczęściej zadawane pytania

Co jeśli podam tylko styl w `border`?

Jeśli podasz tylko styl, np. border: dashed;, przeglądarka użyje domyślnych wartości dla szerokości (medium) i koloru (currentColor). Obramowanie będzie widoczne.

Czy `border: none;` jest równoważne `border-style: none;`?

Tak, oba zapisy skutecznie usuwają obramowanie. border: none; jest shorthandem, który ustawia border-style na none, a pozostałe właściwości (szerokość, kolor) na ich wartości domyślne (co przy border-style: none nie ma znaczenia).

Czy mogę użyć `border` do ustawienia różnych stylów dla różnych krawędzi?

Nie, główny shorthand border ustawia te same wartości (szerokość, styl, kolor) dla wszystkich czterech krawędzi. Aby ustawić różne style/szerokości/kolory dla poszczególnych krawędzi, musisz użyć indywidualnych właściwości (np. border-top-style, border-bottom-color) lub shorthandów dla krawędzi (border-top, border-left itp.).

Czy shorthand `border` resetuje `border-radius`?

Nie. Właściwość border-radius (do zaokrąglania rogów) jest oddzielną właściwością i nie jest częścią shorthandu border. Użycie border nie wpływa na ustawiony wcześniej border-radius.

9.13. Właściwość zbiorcza border