Właściwość CSS border-style

Definicja stylu, przeznaczenie i użycie border-style

Właściwość border-style określa styl obramowania czterech granic elementu (ramek). Ta właściwość może mieć od jednej do czterech wartości.

Wartości właściwości border-style

Składnia CSS border-style

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Wsparcie przeglądarek dla właściwości border-style

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
border-style	1.0	4.0	1.0	1.0	3.5

Uwaga: wartość hidden nie jest obsługiwana w przeglądarce IE7 i starszych. IE8 wymaga !DOCTYPE. Przeglądarki IE9 i nowsze obsługują hidden.

Przykładowe zastosowania z właściwością border-style

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

div {
    border-width:5px;  
    border-style:none;
}

Przykłady właściwości border-style

1. border-style: dotted solid double dashed;
górne obramowanie jest rodzaju dotted
prawe obramowanie jest solid
dolne obramowanie jest double
lewe obramowanie jest dashed

2. border-style: dotted solid double;
górne obramowanie jest dotted
prawe i lewe obramowanie jest solid
dolne obramowanie jest double

3. border-style: dotted solid;
górne i dolne obramowanie jest dotted
prawe i lewe obramowanie jest solid

4. border-style: dotted;
wszystkie cztery obramowania są dotted

border-style: dashed;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;