Właściwość Style borderStyle

Definicja i użycie

borderStyle Ustawia lub zwraca styl krawędzi elementu.

Ta właściwość może przyjąć od jednej do czterech wartości:

  • Jedna wartość, na przykład: p {border-style: solid} - wszystkie cztery krawędzie są pełne
  • Dwie wartości, na przykład: p {border-style: solid dotted} - górna i dolna krawędzie to ciągła linia, boczne krawędzie to linia przerywana
  • Trzy wartości, na przykład: p {border-style: solid dotted double} - górna krawędź to ciągła linia, boczne krawędzie to linia punktowa, dolna krawędź to podwójna linia
  • Cztery wartości, na przykład: p {border-style: solid dotted double dashed} - górna krawędź to ciągła linia, prawa krawędź to linia przerywana, dolna krawędź to podwójna linia, lewa krawędź to linia przerywana

Zobacz również:

Tutorial CSS:Krawędzie CSS

Podręcznik CSS:Atrybut border-style

Podręcznik HTML DOM:właściwość border

Przykład

Przykład 1

Dodanie pełnej krawędzi do elementu <div>:

document.getElementById("myDiv").style.borderStyle = "solid";

Spróbuj sam

Przykład 2

Zmiana stylu czterech krawędzi elementu <div>:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Spróbuj sam

Przykład 3

Zwracana wartość stylu krawędzi elementu <div>:

alert(document.getElementById("myDiv").style.borderStyle);

Spróbuj sam

Przykład 4

Prezentacja wszystkich różnych wartości:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Spróbuj sam

Gramatyka

Zwracanie właściwości borderStyle:

object.style.borderStyle

Ustawienie właściwości borderStyle:

object.style.borderStyle = value
Wartość Opis
brak Definiuje brak krawędzi. Domyślnie.
ukryta Jest to to samo co "none", ale wyjątkowo w przypadku rozwiązywania konfliktów krawędzi tabeli.
kropkowa Definiuje krawędź punktowaną.
przerywana Definiuje krawędź przerywaną.
solid Definiuje pełną krawędź.
podwójna Definiuje dwie krawędzie. Szerokość obu krawędzi jest taka sama jak wartość border-width.
wklęsła Definiuje 3D krawędź wklęsłą. Efekt zależy od border-color wartości.
grzbiet Definiuje 3D krawędź grzbietową. Efekt zależy od border-color wartości.
wcięta Definiuje 3D krawędź wciętą. Efekt zależy od border-color wartości.
worth Definiuje 3D krawędź wysuniętą. Efekt zależy od wartości border-color.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: Brak
Zwracana wartość: Ciąg znaków, który reprezentuje styl krawędzi elementu.
Wersja CSS: CSS1

Przeglądarki wspierają

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie