Własność CSS border-block-style

> Dodaj do ulubionych

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

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-block-style odnosi się do górnej i dolnej krawędzi obramowania, a więc odpowiada indywidualnym własnościom fizycznym border-top-style i border-bottom-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-block-style odpowiada indywidualnym własnościom fizycznym border-left-style i border-right-style.

Przykład

W tym przykładzie element aside będzie miał czerwone przerywane obie krawędzie obramowania w orientacji blokowej o szerokości 4 pikseli:

aside { border-block-width: 4px; border-block-style: dotted; border-block-color: red; } …

Efekt:

Efekt użycia własności border-block-style

Wartości

Własność border-block-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-block-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-block-style: dotted;

    Obie krawędzie obramowania w orientacji blokowej będą przerywane. To samo, co:

    border-block-start-style: dotted;
    border-block-end-style: dotted;
    Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do początkowej krawędzi obramowania w orientacji blokowej elementu, a druga – do końcowej krawędzi obramowania w orientacji blokowej elementu, np.:
    border-block-style: dotted solid;

    Krawędź początkowa będzie przerywana, a końcowa – ciągła. To samo, co:

    border-block-start-style: dotted;
    border-block-end-style: solid;

    Przykładowy efekt:

    Efekt użycia własności border-block-style z kropkowaniem

Zastosowanie

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

Podsumowanie

ZastosowanieWszystkie elementy HTML i pseudoelement ::first-letter
Własności składowe
Obsługiwane wartościSłowa kluczowe: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
Wartość początkowanone
DziedziczenieNie
SpecyfikacjaCSS Logical Properties and Values Level 1 – border-block-style