Style borderColor eigenschap
- Previous page borderCollapse
- Next page borderImage
- Go back one level HTML DOM Style Object
Definitie en gebruik
borderColor
De eigenschap stelt de kleur van de rand van het element in of retourneert deze.
Deze eigenschap kan één tot vier waarden aannemen:
- Een waarde, bijvoorbeeld: p {border-color: red} - alle vier kanten zijn rood
- Twee waarden, bijvoorbeeld: p {border-color: red transparent} - De boven- en onderrand zijn rood, de linker- en rechterrand zijn transparant
- Drie waarden, bijvoorbeeld: p {border-color: red green blue}- De bovenrand is rood, de linker- en rechterrand zijn groen, de onderrand is blauw
- Vier waarden, bijvoorbeeld: p {border-color: red green blue yellow} - De bovenrand is rood, de rechterrand is groen, de onderrand is blauw, de linkerrand is geel
Zie ook:
CSS handleiding:CSS border
CSS referentiehandleiding:border-color-eigenschap
HTML DOM referentiehandleiding:border-eigenschap
Voorbeeld
Voorbeeld 1
Verander de kleur van de vierkanten van het <div>-element naar rood:
document.getElementById("myDiv").style.borderColor = "red";
Voorbeeld 2
Verander de kleur van de boven- en onderrand van het <div>-element naar groen, en de kleur van de linker- en rechterrand naar paars:
document.getElementById("myDiv").style.borderColor = "green purple";
Voorbeeld 3
Retourneer de randkleur van het <div>-element:
alert(document.getElementById("myDiv").style.borderColor);
Syntaxis
Retourneer borderColor-eigenschap:
object.style.borderColor
Stel borderColor-eigenschap in:
object.style.borderColor = "kleur|transparent|initial|inherit"
Eigenschapswaarde
Waarde | Beschrijving |
---|---|
kleur |
Stelt de kleur van de rand vast. De standaardkleur is zwart. Bekijk CSS kleurwaardenvoor een volledige lijst van mogelijke kleurwaarden. |
transparent | De kleur van de rand is transparant (de onderliggende inhoud komt door). |
initial | Deze eigenschap ingesteld op de standaardwaarde. Raadpleeg initial. |
inherit | Deze eigenschap erfgenomen van de ouder-element. Raadpleeg inherit. |
Technische details
Standaardwaarde: | zwart |
---|---|
Retourwaarde: | Een string die de kleur van de elementenrand aangeeft. |
CSS versie: | CSS1 |
Browserondersteuning
Tabelnummers vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- Previous page borderCollapse
- Next page borderImage
- Go back one level HTML DOM Style Object