Własność CSS border-inline-style

Własność CSS border-inline-style to logiczna własność zbiorcza służąca do ustawiania stylu obu krawędzi (początkowej i końcowej) obramowania w orientacji śródliniowej elementu. Ta własność niedziedziczona obejmuje następujące indywidualne logiczne własności obramowania:

• border-inline-start-style
• border-inline-end-style

Wybór krawędzi przez tę własność zależy od orientacji i kierunku tekstu. Jeśli na przykład tekst jest pisany od góry i od lewej (jak w języku polskim), to własność border-inline-style odnosi się do lewej i prawej krawędzi obramowania, a więc odpowiada indywidualnym własnościom fizycznym border-left-style i border-right-style.

Jeżeli natomiast tekst jest pisany od prawej do lewej i w orientacji pionowej (jak np. w języku japońskim), to własność border-inline-style odpowiada indywidualnym własnościom fizycznym border-top-style i border-bottom-style.

Przykład

W tym przykładzie obie krawędzie obramowania elementu strong w orientacji śródliniowej będą czerwonymi liniami ciągłymi o szerokości 6 pikseli:

strong {
  border-inline-width: 6px;
  border-inline-style: solid;
  border-inline-color: red;
}
...
<strong>Lorem ipsum dolor sit amet.</strong>

Efekt:

Wartości

Własność border-inline-style przyjmuje jako wartość następujące słowa kluczowe: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

Szczegółowy opis tych wartości znajduje się na stronie opisu własności border-style.

Składnia

Własność border-inline-style przyjmuje jedną lub dwie wartości stylu obramowania wymienione powyżej.

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

  border-inline-style: solid;

  Obie krawędzie obramowania w orientacji śródliniowej będą przerywane. To samo, co:

  border-inline-start-style: solid;
  border-inline-end-style: solid;

• Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do początkowej krawędzi obramowania w orientacji śródliniowej elementu, a druga – do końcowej krawędzi obramowania w orientacji śródliniowej elementu, np.:

  border-inline-style: double solid;

  Krawędź początkowa będzie podwójna, a końcowa – pojedyncza. To samo, co:

  border-inline-start-style: double;
  border-inline-end-style: solid;

  Przykładowy efekt:

  

Zastosowanie

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

Podsumowanie