Style borderStyle eigenschap

Definitie en gebruik

borderStyle De eigenschap stelt in of retourneert de stijl van de elementenrand.

Deze eigenschap kan één tot vier waarden aannemen:

  • Een waarde, bijvoorbeeld: p {border-style: solid} - Alle vier de randen zijn solide
  • Twee waarden, bijvoorbeeld: p {border-style: solid dotted} - Boven- en onderrand zijn solide lijnen, linker en rechter rand zijn gestippelde lijnen
  • Drie waarden, bijvoorbeeld: p {border-style: solid dotted double} - Bovenrand is een solide lijn, linker en rechter rand zijn gestippelde lijnen, onderrand is een dubbele lijn
  • Vier waarden, bijvoorbeeld: p {border-style: solid dotted double dashed} - Bovenrand is een solide lijn, rechter rand is een gestippelde lijn, onderrand is een dubbele lijn, linker rand is een gestippelde lijn

Zie ook:

CSS Handleiding:CSS border

CSS Referenties Handleiding:border-style eigenschap

HTML DOM Referenties Handleiding:border 属性

border-eigenschap

Voorbeeld

Voorbeeld 1

Voeg een solide rand toe aan het <div>-element:

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

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

Voorbeeld 2

Wijzig de stijl van de vier randen van het <div>-element:

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

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

Voorbeeld 3

Return de randstijl van het <div>-element:

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

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

Voorbeeld 4

Voor alle verschillende waarden demonstratie:
var listValue = selectTag.options[selectTag.selectedIndex].text;

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

Probeer het zelf

Syntaxis

Stel de borderStyle-eigenschap in:Return borderStyle-eigenschap:

.style.borderStyle

Stel de borderStyle-eigenschap in:object .style.borderStyle =
value Waarde
Beschrijving none
Definieer een randloze rand. Standaard. hidden
Gelijk aan "none", maar uitzonderlijk in het oplossen van randconflicten van tabel-elementen. dotted
Definieer een gepunkte rand. dashed
Definieer een gestreepte rand. solid
Definieer een solide rand. double
Definieer twee randen. De breedte van beide randen is gelijk aan de waarde van border-width. groove Definieer een 3D ingesprongen rand. Het effect hangt af van border-color
Definieer een 3D ingesprongen rand. Het effect hangt af van ridge Definieer een 3D ingesprongen rand. Het effect hangt af van border-color
Definieer een 3D geplooide rand. Het effect hangt af van inset Definieer een 3D ingesprongen rand. Het effect hangt af van border-color
waarde. Definieer een 3D uitstekende rand. Het effect hangt af van de waarde van border-color.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Inherit deze eigenschap van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: Geen
Retourwaarde: Een string die de stijl van de elementenrand weergeeft.
CSS versie: CSS1

Browser ondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support