CSS border-kleur eigenschap

Definitie en gebruik

De border-color-eigenschap stelt de kleur van de vier randen in. Deze eigenschap kan 1 tot 4 kleuren instellen.

De border-color-eigenschap is een afkortingseigenschap die de kleur van alle zichtbare randen van een element kan instellen, of verschillende kleuren kan instellen voor de vier randen afzonderlijk. Bekijk het volgende voorbeeld:

Voorbeeld 1

border-color:red green blue pink;
  • De bovenste rand is rood
  • De rechter rand is groen
  • De onderste rand is blauw
  • De linker rand is roze

Voorbeeld 2

border-color:red green blue;
  • De bovenste rand is rood
  • De rechter en linker rand zijn groen
  • De onderste rand is blauw

Voorbeeld 3

border-color:dotted red green;
  • De bovenste en onderste rand zijn rood
  • De rechter en linker rand zijn groen

Voorbeeld 4

border-color:red;
  • Alle 4 randen zijn rood

Onthoud dat de stijl van de rand niet none of hidden mag zijn, anders zal de rand niet verschijnen.

Opmerking:Zorg ervoor dat de eigenschap border-style altijd voor border-color wordt vermeld. Het element moet een rand hebben voordat je de kleur verandert.

Zie ook:

CSS tutorial:CSS rand

HTML DOM referentiemanual:borderColor eigenschap

Voorbeeld

Stel de kleur van de 4 randen in:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Probeer het zelf

CSS syntax

border-color: color|transparent|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
color_name Het voorschrifft de randkleur met een kleurnaam (bijvoorbeeld rood).
hex_number Het voorschrifft de randkleur met een hexadecimale waarde (bijvoorbeeld #ff0000).
rgb_number Het voorschrifft de randkleur met rgb-code (bijvoorbeeld rgb(255,0,0)).
transparent Standaardwaarde. De randkleur is transparant.
inherit Het wordt voorgeschreven dat de randkleur van de ouder-element moet worden geërfd.

Technische details

Standaardwaarde: niet gespecificeerd
Inheritschapskwaliteit: nee
Versie: CSS1
JavaScript syntax: object.style.borderColor="#FF0000 blue"

Meer voorbeelden

Instellen van de kleur van de vier randen
Dit voorbeeld demonstreert hoe je de kleur van de vier randen instelt. Je kunt één tot vier kleuren instellen.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Opmerking:Internet Explorer 6 (en oudere versies) ondersteunt de eigenschapswaarde "transparent" niet.

Opmerking:Internet Explorer 7 en oudere browsers ondersteunen de waarde "inherit" niet. IE8 vereist !DOCTYPE. IE9 ondersteunt "inherit".