Własność CSS border-inline-width

Własność CSS border-inline-width to logiczna własność zbiorcza służąca do ustawiania szerokości 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-width
• border-inline-end-width

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-width odnosi się do lewej i prawej krawędzi obramowania, a więc odpowiada indywidualnym własnościom fizycznym border-left-width i border-right-width.

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-width odpowiada indywidualnym własnościom fizycznym border-top-width i border-bottom-width.

Przykład

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

em {
  border-inline-width: 4px;
  border-inline-style: solid;
  border-inline-color: lightsalmon;
}
...
<em>Lorem ipsum dolor sit amet.</em>

Efekt:

Wartości

Własność border-inline-width przyjmuje jako wartość liczbę z jednostką długości lub jedno z następujących słów kluczowych: thin, medium, thick.

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

Składnia

Własność border-inline-width przyjmuje jedną lub dwie wartości szerokości 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-width: 10px;

  Obie krawędzie obramowania w orientacji śródliniowej będą miały grubość po 10 pikseli. To samo, co:

  border-inline-start-width: 10px;
  border-inline-end-width: 10px;

• 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-width: 10px 5px;

  Krawędź początkowa będzie miała szerokość 10 pikseli, a końcowa – 5 pikseli. To samo, co:

  border-inline-start-width: 10px;
  border-inline-end-width: 5px;

  Przykładowy efekt:

  

Zastosowanie

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

Podsumowanie