config

Strona w trakcie modernizacji

Zapraszamy wkrótce

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

Wartość Opis
none Brak obramowania. Ustawienie domyślne.
hidden To samo co none, z wyjątkiem rozwiązywania konfliktów obramowań dla elementów tabeli.
dotted Określa kropkowaną ramkę.
dashed Określa przerywaną ramkę.
solid Definiuje pełne obramowanie.
double Definiuje podwójne obramowanie.
groove Określa rowkowane obramowanie 3D. Efekt zależy od wartości koloru obramowania.
ridge Określa prążkowaną ramkę 3D. Efekt zależy od wartości koloru obramowania.
inset Określa ramkę 3D. Efekt zależy od wartości koloru obramowania.
outset Określa obramowanie 3D. Efekt zależy od wartości koloru obramowania.
initial Ustawia tę właściwość na jej wartość domyślną.
inherit Dziedziczy tę właściwość z elementu nadrzędnego.

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ść chrome edge firefox safari opera
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.

Właściwość CSS:
border-style:

 
Rezultat:
 
Kod CSS:
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;

 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, Tel.: +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
Tel.: +48 780 060 995,
Pon. - pt. 8:00 - 17:00