Właściwość stylu obramowania CSS
Przykład
Ustaw styl obramowania:
div {border-style: dotted;}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość border-styleustawia styl czterech obramowań elementu. Ta właściwość może mieć od jednej do czterech wartości.
Przykłady:
- styl obramowania: kropkowana, jednolita, podwójnie przerywana;
- górna granica jest przerywana
- prawa krawędź jest pełna
- dolna granica jest podwójna
- lewa ramka jest przerywana
- styl obramowania: kropkowana, jednolita podwójna;
- górna granica jest przerywana
- prawe i lewe obramowania są pełne
- dolna granica jest podwójna
- styl obramowania: kropkowana jednolita;
- górna i dolna granica są przerywane
- prawe i lewe obramowania są pełne
- styl obramowania: kropkowany;
- wszystkie cztery obramowania są kropkowane
| Domyślna wartość: | Żaden |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | nie. Przeczytaj o animacji |
| Wersja: | CSS1 |
| Składnia JavaScript: | obiekt .style.borderStyle="podwójna kropkowana" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Uwaga: wartość „ukryty” nie jest obsługiwana w IE7 i wcześniejszych. IE8 wymaga! DOCTYPE. IE9 i nowsze obsługują "ukryte".
Składnia CSS
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Wartości nieruchomości
| Value | Description | Play it |
|---|---|---|
| none | Default value. Specifies no border | |
| hidden | The same as "none", except in border conflict resolution for table elements | |
| dotted | Specifies a dotted border | |
| dashed | Specifies a dashed border | |
| solid | Specifies a solid border | |
| double | Specifies a double border | |
| groove | Specifies a 3D grooved border. The effect depends on the border-color value | |
| ridge | Specifies a 3D ridged border. The effect depends on the border-color value | |
| inset | Specifies a 3D inset border. The effect depends on the border-color value | |
| outset | Specifies a 3D outset border. The effect depends on the border-color value | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Przerywana granica:
div {border-style: dashed;}
Przykład
Solidna granica:
div {border-style: solid;}
Przykład
Podwójna granica:
div {border-style: double;}
Przykład
Granica rowka:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
Przykład
Granica kalenicy:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
Przykład
Wstawka obramowania:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
Przykład
Granica początkowa:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Przykład
Ustaw różne obramowania po każdej stronie elementu:
p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
Powiązane strony
Samouczek CSS: obramowanie CSS
Dokumentacja HTML DOM: właściwość borderStyle