border-style

Wartości

• none – domyślnie: bez ramki (grubość liczy się jako 0).
• hidden – jak none, w tabelach z border-collapse: collapse wygasza też ramkę sąsiedniej komórki.
• solid – linia ciągła; dashed – przerywana; dotted – kropkowana.
• double – dwie linie z odstępem, wymaga grubości co najmniej 3 px.
• groove, ridge, inset, outset – ramki „3D”, jaśniejszy i ciemniejszy odcień koloru (wygląd różni się między przeglądarkami).
• Od jednej do czterech wartości rozdziela się na strony jak przy margin.

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

Przykłady

Wszystkie style przy grubości 4 px:

<div class="box solid">solid</div>
<div class="box dashed">dashed</div>
<div class="box dotted">dotted</div>
<div class="box double">double</div>
<div class="box groove">groove</div>
<div class="box ridge">ridge</div>
<div class="box inset">inset</div>
<div class="box outset">outset</div>

.box {
  display: inline-block;
  width: 70px;
  margin: 0 8px 8px 0;
  padding: 6px;
  border: 4px #38b8f9;
  text-align: center;
  font-size: 12px;
}
.solid { border-style: solid; }
.dashed { border-style: dashed; }
.dotted { border-style: dotted; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge { border-style: ridge; }
.inset { border-style: inset; }
.outset { border-style: outset; }

Tylko dolna linia – separator pod nagłówkiem:

<h4 class="heading">Nagłówek z linią</h4>

.heading {
  margin: 0;
  padding-bottom: 4px;
  border-width: 0 0 2px;
  border-style: none none dashed;
  border-color: #38b8f9;
}

Na co uważać

• Gdy ramka „nie działa”, zwykle brakuje stylu: border: 1px red bez solid się nie narysuje.
• Długości kresek i kropek w dashed i dotted nie da się ustawić, każda przeglądarka rysuje je po swojemu. Do dokładnego wzoru potrzebne jest border-image albo tło z gradientem.
• double o grubości 1 albo 2 px wygląda jak solid.

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
border-width
border-color
border-image
outline