Style borderColor eigenschap

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";

Probeer het zelf

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";

Probeer het zelf

Voorbeeld 3

Retourneer de randkleur van het <div>-element:

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

Probeer het zelf

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