Własność CSS border-style

Własność CSS border-style to własność zbiorcza CSS służąca do ustawiania stylu wszystkich czterech krawędzi obramowania elementu. Jest to własność niedziedziczona, która obejmuje następujące własności obramowania:

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

Przykład

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

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

Efekt:

Wartości

Wartością własności border-style może być jedno z poniższych słów kluczowych:

• none – brak obramowania
• hidden – brak obramowania, od słowa kluczowego none różni się tym, że ma najwyższy priorytet w przypadku konfliktu ustawień obramowania komórek tabeli, tzn. jeśli wystąpi taki konflikt, ostatecznie zostanie zastosowana wartość hidden i obramowanie się nie pojawi
• dotted – obramowanie przerywane złożone z kropek
• dashed – obramowanie przerywane złożone z krótkich kresek
• solid – linia ciągła
• double – podwójna linia ciągła. Grubość tych dwóch linii nie jest ściśle określona, ale suma ich grubości i szerokości odstępu między nimi musi wynosić tyle, ile ustawienie własności border-width
• groove – linie obramowania są cieniowane w taki sposób, że wygląda ono tak, jakby było osadzone w głąb strony
• ridge – odwrotność groove
• inset – sprawia wrażenie, jakby znajdująca się wewnątrz treść była wtopiona w stronę. W przypadku komórek tabeli z ustawieniem border-collapse: collapse działa, jak ridge
• outset – odwrotność inset. W przypadku komórek tabeli z ustawieniem border-collapse: collapse działa, jak groove

Wartością początkową własności border-style jest none.

Składnia

Własność border-style przyjmuje jedną, dwie, trzy lub cztery wartości. Jeśli wartości jest mniej niż cztery, to brakujące są uzupełniane automatycznie wg poniższych zasad:

• Jedna wartość: jeśli zostanie zdefiniowana tylko jedna wartość, to zostanie ona zastosowana do wszystkich czterech krawędzi obramowania, np.:

  border-style: dotted;

  Wszystkie cztery krawędzie obramowania będą linią przerywaną. To samo, co:

  border-top-style: dotted;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-left-style: dotted;

• Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do górnej i dolnej krawędzi obramowania, a druga – do lewej i prawej, np.:

  border-style: dotted solid;

  Górna i dolna krawędź obramowania będą przerywane, a lewa i prawa – ciągłe. To samo, co:

  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

• Trzy wartości: jeśli są zdefiniowane trzy wartości, to pierwsza odnosi się do górnej krawędzi obramowania, druga> – do lewej i prawej, a trzecia – do dolnej.

  border-style: dotted solid double;

  Górna krawędź obramowania byłaby linią przerywaną, lewa i prawa byłyby liniami ciągłymi, a dolna – byłaby podwójna:

  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: double;
  border-left-style: solid;

• Cztery wartości: jeśli są zdefiniowane cztery wartości, to odnoszą się po kolei do górnej, prawej, dolnej i lewej krawędzi obramowania.

  border-style: dotted solid double groove;

  Górna krawędź będzie linią przerywaną, prawa – linią ciągłą, dolna – linią podwójną, a lewa – cieniowaną w stylu groove.

  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: double;
  border-left-style: groove;

Zastosowanie

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

Podsumowanie