Kurs HTML

Wprowadzenie: Jak ma wyglądać linia obramowania?

Właściwość border-style jest **kluczowa** do tego, aby obramowanie było w ogóle widoczne. Określa ona **wygląd linii** obramowania.

Domyślną wartością dla border-style jest none, co oznacza brak obramowania, nawet jeśli ustawiono jego szerokość (border-width) i kolor (border-color).

Wartości border-style

Właściwość border-style może przyjmować następujące wartości:

• none: (Domyślne) Brak obramowania. Szerokość obramowania jest zerowana (nawet jeśli ustawiono border-width).
• hidden: Podobne do none, brak widocznego obramowania. Główna różnica pojawia się w kontekście tabel i rozwiązywania konfliktów obramowań (border-collapse), gdzie hidden ma wyższy priorytet niż style innych komórek.
• solid: Ciągła, jednolita linia.
• dashed: Linia przerywana (kreski).
• dotted: Linia kropkowana.
• double: Podwójna ciągła linia. Całkowita szerokość linii jest równa wartości border-width. Przestrzeń między liniami jest przezroczysta (pokazuje background-color).
• groove: Efekt "rowka" (3D). Wygląd zależy od wartości border-color. Tworzy wrażenie wciśniętego obramowania.
• ridge: Efekt "grzbietu" (3D), przeciwieństwo groove. Wygląd zależy od wartości border-color. Tworzy wrażenie wypukłego obramowania.
• inset: Efekt "wstawienia" (3D). Sprawia, że całe pudełko wygląda na wciśnięte. Wygląd zależy od wartości border-color.
• outset: Efekt "wypukłości" (3D), przeciwieństwo inset. Sprawia, że całe pudełko wygląda na wypukłe. Wygląd zależy od wartości border-color.

Wygląd stylów 3D (groove, ridge, inset, outset) może różnić się w zależności od przeglądarki i często zależy od koloru ustawionego w border-color (przeglądarka używa jaśniejszych i ciemniejszych odcieni tego koloru do stworzenia efektu 3D).

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

.style-example {
  padding: 10px;
  margin-bottom: 10px;
  border-width: 5px; /* Ustawmy grubość, aby style były dobrze widoczne */
  border-color: darkcyan;
  text-align: center;
}

.solid-style  { border-style: solid; }
.dashed-style { border-style: dashed; }
.dotted-style { border-style: dotted; }
.double-style { border-style: double; }
.groove-style { border-style: groove; }
.ridge-style  { border-style: ridge; }
.inset-style  { border-style: inset; }
.outset-style { border-style: outset; }
Kopiuj

Ustawianie stylu dla poszczególnych krawędzi

Podobnie jak border-width, właściwość border-style może przyjąć od jednej do czterech wartości, aby ustawić różne style dla poszczególnych krawędzi (góra, prawo, dół, lewo):

• Jedna wartość: (np. border-style: dotted;) - Wszystkie cztery krawędzie mają ten sam styl.
• Dwie wartości: (np. border-style: solid dashed;) - Góra i dół: solid, lewa i prawa: dashed.
• Trzy wartości: (np. border-style: solid dashed dotted;) - Góra: solid, lewa i prawa: dashed, dół: dotted.
• Cztery wartości: (np. border-style: solid dashed dotted double;) - Góra: solid, prawo: dashed, dół: dotted, lewo: double.

.multi-style-border {
  border-width: 4px; /* Jedna szerokość dla wszystkich */
  border-color: brown;
  /* Góra: solid, Prawa: dashed, Dół: dotted, Lewa: double */
  border-style: solid dashed dotted double;
  padding: 20px;
}Kopiuj

Istnieją również indywidualne właściwości do ustawiania stylu konkretnej krawędzi:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Każda z nich przyjmuje tylko jedną z wyżej wymienionych wartości stylu.

.individual-styles {
  border-width: 3px;
  border-color: olive;
  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: double;
  border-left-style: dotted;
  padding: 20px;
}Kopiuj