StijlrandKleureigenschap _ _
Voorbeeld
Verander de kleur van de vier randen van een <div> element in rood:
document.getElementById("myDiv").style.borderColor = "red";
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Met de eigenschap borderColor wordt de kleur van de rand van een element ingesteld of geretourneerd.
Deze eigenschap kan één tot vier waarden aannemen:
- Eén waarde, zoals: p {randkleur: rood} - alle vier de randen zijn rood
- Twee waarden, zoals: p {rand-kleur: rood transparant} - boven- en onderrand zijn rood, linker- en rechterrand zijn transparant
- Drie waarden, zoals: p {randkleur: rood groen blauw}- bovenrand wordt rood, linker- en rechterrand zijn groen, onderrand is blauw
- Vier waarden, zoals: p {randkleur: rood groen blauw geel} - bovenrand wordt rood, rechterrand is groen, onderrand is blauw, linkerrand is geel
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Syntaxis
Retourneer de eigenschap borderColor:
object.style.borderColor
Stel de borderColor-eigenschap in:
object.style.borderColor = "color|transparent|initial|inherit"
Eigendomswaarden
Value | Description |
---|---|
color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
transparent | The color of the border is transparent (underlying content will shine through) |
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: | huidige kleur |
---|---|
Winstwaarde: | Een tekenreeks, die de kleur van de rand van een element weergeeft |
CSS-versie | CSS1 |
Meer voorbeelden
Voorbeeld
Verander de kleur van de boven- en onderrand in groen, en de linker- en rechterrand in paars, van een <div> element:
document.getElementById("myDiv").style.borderColor = "green purple";
Voorbeeld
Retourneer de randkleur van een <div>-element:
alert(document.getElementById("myDiv").style.borderColor);
Gerelateerde pagina's
CSS-zelfstudie: CSS-rand
CSS-referentie: eigenschap border-color
HTML DOM-referentie: grenseigenschap