Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >border

border

border: <width> <style> <color>

Określa ramkę na wszystkich czterech stronach elementu naraz: grubość, styl linii i kolor, w dowolnej kolejności. Dla poszczególnych stron są border-top, border-right, border-bottom i border-left.

Wartości

  • grubość – długość (1px, 0.2em) albo thin, medium, thick; bez podania medium.
  • styl – solid, dashed, dotted, double, groove, ridge, inset, outset (z efektem 3D), none i hidden (bez ramki).
  • kolor – bez podania kolor tekstu (currentColor).

Wartość początkowa: medium none currentColor. Dziedziczona: nie. Dotyczy: wszystkich elementów.

Przykłady

Style linii:

<div class="box solid">solid</div>
<div class="box dashed">dashed</div>
<div class="box dotted">dotted</div>
<div class="box double">double</div>

.box {
  display: inline-block;
  margin: 4px;
  padding: 8px 14px;
}
.solid { border: 3px solid #0088d1; }
.dashed { border: 3px dashed #0088d1; }
.dotted { border: 3px dotted #0088d1; }
.double { border: 4px double #0088d1; }
Wynik
solid
dashed
dotted
double

Ramka tylko z jednej strony – wyróżniony cytat i linia oddzielająca:

<blockquote class="quote">Ramka tylko z lewej.</blockquote>
<h3 class="heading">Nagłówek z linią pod spodem</h3>

.quote {
  margin: 0 0 12px;
  padding: 4px 12px;
  border-left: 4px solid #8bc34a;
}
.heading {
  margin: 0;
  padding-bottom: 4px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}
Wynik
Ramka tylko z lewej.

Nagłówek z linią pod spodem

Na co uważać

  • Bez stylu ramka się nie wyświetla: border: 2px red nic nie rysuje, bo domyślny styl to none.
  • Domyślnie ramka dodaje się do wymiarów elementu (zobacz box-sizing).
  • Skrót border ustawia wszystkie strony jednakowo i nadpisuje wcześniejsze ustawienia, np. border-left. Wyjątek dla jednej strony napisz po nim.
  • Ramkę, która nie może zmieniać wymiarów (wyróżnienie po najechaniu), zastąpi właściwość outline albo box-shadow.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
border-width
border-style
border-color
border-radius
outline
box-sizing