Style borderStyle Property
Voorbeeld
Voeg een "vaste" rand toe aan een <div>-element:
document.getElementById("myDiv").style.borderStyle = "solid";
Definitie en gebruik
Met de eigenschap borderStyle wordt de stijl van de rand van een element ingesteld of geretourneerd.
Deze eigenschap kan één tot vier waarden aannemen:
- Eén waarde, zoals: p {randstijl: vast} - alle vier de randen zijn vast
- Twee waarden, zoals: p {randstijl: effen gestippeld} - boven- en onderrand zijn effen, linker- en rechterrand zijn gestippeld
- Drie waarden, zoals: p {randstijl: effen gestippeld dubbel}- bovenrand is effen, linker- en rechterrand worden gestippeld, onderrand is dubbel
- Vier waarden, zoals: p {randstijl: effen gestippelde dubbele streepjes} - bovenrand is effen, rechterrand wordt gestippeld, onderrand is dubbel, linkerrand wordt onderbroken
Browserondersteuning
| Property | |||||
|---|---|---|---|---|---|
| borderStyle | Yes | Yes | Yes | Yes | Yes |
Syntaxis
Retourneer de eigenschap borderStyle:
object.style.borderStyle
Stel de eigenschap borderStyle in:
object.style.borderStyle = value
Eigendomswaarden
| Value | Description |
|---|---|
| none | Defines no border. This is default |
| hidden | The same as "none", except in border conflict resolution for table elements |
| dotted | Defines a dotted border |
| dashed | Defines a dashed border |
| solid | Defines a solid border |
| double | Defines two borders. The width of the two borders are the same as the border-width value |
| groove | Defines a 3D grooved border. The effect depends on the border-color value |
| ridge | Defines a 3D ridged border. The effect depends on the border-color value |
| inset | Defines a 3D inset border. The effect depends on the border-color value |
| outset | Defines 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 |
Technische details
| Standaardwaarde: | geen |
|---|---|
| Winstwaarde: | Een tekenreeks, die de stijl van de rand van een element weergeeft |
| CSS-versie | CSS1 |
Meer voorbeelden
Voorbeeld
Wijzig de stijl van de vier randen van een <div>-element:
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Voorbeeld
Retourneer de randstijl van een <div>-element:
alert(document.getElementById("myDiv").style.borderStyle);
Voorbeeld
Een demonstratie van alle verschillende waarden:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Gerelateerde pagina's
CSS-zelfstudie: CSS-rand
CSS -referentie: eigenschap in randstijl
HTML DOM-referentie: grenseigenschap
❮ Stijlobject