CSS właściwość border-style

Definicja i zastosowanie

Atrybut border-style służy do ustawiania stylu wszystkich brzegów elementu, lub osobno dla każdego brzegu.

Brzegi mogą się pojawić tylko wtedy, gdy ta wartość nie jest 'none'.

Przykład 1

border-style:dotted solid double dashed;
  • Górna krawędź jest kropkowane
  • Prawa krawędź jest liniowa
  • Dolna krawędź jest podkreślona
  • Lewa krawędź jest przerywana

Przykład 2

border-style:dotted solid double;
  • Górna krawędź jest kropkowane
  • Prawa krawędź i lewa krawędź są liniowe
  • Dolna krawędź jest podkreślona

Przykład 3

border-style:dotted solid;
  • Górna krawędź i dolna krawędź są kropkowane
  • Prawa krawędź i lewa krawędź są liniowe

Przykład 4

border-style:dotted;
  • Wszystkie 4 krawędzie są kropkowane

Inne zasoby:

CSS Podręcznik:Prawa graniczne CSS

Przeglądarka DOM HTML:Atrybut borderStyle

Przykład

Ustaw styl czterech boków:

p
  {
  border-style:solid;
  }

Spróbuj sam

Gramatyka CSS

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

Wartości atrybutu

Wartości Opis
none Zdefiniuj brak ramki.
hidden Jest to to samo co "none". Jednak w przypadku tabel, "hidden" jest używane do rozwiązywania konfliktów ramki.
dotted Zdefiniuj ramkę punktowaną. W większości przeglądarek jest prezentowana jako linia ciągła.
dashed Zdefiniuj linię przerywaną. W większości przeglądarek jest prezentowana jako linia ciągła.
solid Zdefiniuj linię ciągłą.
double Zdefiniuj dwuliniową ramkę. Szerokość linii jest równa wartości border-width.
groove Zdefiniuj 3D rowkową ramkę. Jej efekt zależy od wartości border-color.
ridge Zdefiniuj 3D żebrowaną ramkę. Jej efekt zależy od wartości border-color.
inset Zdefiniuj 3D inset ramkę. Jej efekt zależy od wartości border-color.
outset Zdefiniuj 3D outset ramkę. Jej efekt zależy od wartości border-color.
inherit Zaleca się, aby styl ramki był dziedziczony od elementu nadrzędnego.

Opis

Najbardziej nieprzewidywalnym stylem ramki jest double. Zdefiniowany jako szerokość dwóch linii plus przestrzeń między nimi równa wartości border-width. Jednak specyfikacja CSS nie mówi, czy jedna linia jest grubsza niż druga, ani czy obie powinny mieć tę samą szerokość, ani czy przestrzeń między liniami powinna być szersza niż szerokość linii. Wszystko to zależy od użytkownika代理, a twórca nie ma na to wpływu.

Szczegółowe informacje techniczne

Domyślna wartość: nie określono
Inheredność: nie
Wersja: CSS1
Język JavaScript: object.style.borderStyle="dotted double"

Więcej przykładów

Ustawianie stylu czterech ram
Ten przykład pokazuje, jak ustawia się styl czterech ram
Ustawianie różnych ramek dla każdej strony
Ten przykład pokazuje, jak ustawia się różne ramki wokół elementu.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5