Handleiding HTML Legenda | Beschrijving | Randen | CSS eigenschappen | Begin

De border-color eigenschap kun je gebruiken kun je gebruiken om in één keer de kleur van alle randen rond een element te bepalen.

In het volgende voorbeeld zijn verschillende mogelijkheden te zien voor het vastleggen van de kleur. De border-style eigenschap is opgenomen, omdat anders de beginwaarde none geldt en dus geen rand wordt weergegeven. Omdat de border-width eigenschap ontbreekt, wordt voor de breedte van de rand de waarde medium aangehouden.

<P STYLE="border-style: solid; border-color: red;">Voor dit P element is de border-color eigenschap gebruikt met de waarde red.</P>
<P STYLE="border-style: solid; border-color: #33CC99;">Voor dit P element is de border-color eigenschap gebruikt met de waarde #33CC99.</P>
<P STYLE="border-style: solid; border-color: rgb(51,102,153);">Voor dit P element is de border-color eigenschap gebruikt met de waarde rgb(51,102,153).</P>

Bij de waarden groove, ridge, inset en outset van de border-style eigenschap hebben de randen lichte en donkere delen en geven daardoor een 3-D effect. Het lichte deel is over het algemeen lichter en het donkere deel donkerder dan de kleur die is bepaald met de border-color eigenschap. De border-width eigenschap is opgenomen, omdat de beginwaarde medium niet altijd breed genoeg is om het 3-D effect goed te laten zien.

<P STYLE="border-style: groove; border-color: red; border-width: 6px;">Voor dit P element is de border-color eigenschap gebruikt met de waarde red.</P>

Wanneer er geen kleur voor de rand is vastgelegd, dan wordt de voor het element geldende waarde van de color eigenschap aanhouden. De rand heeft dan dus dezelfde kleur als de tekst.

<P STYLE="border-style: solid;">Voor dit P element is de border-color eigenschap niet gebruikt.</P>

De waarde transparent voor de border-color eigenschap zorgt ervoor dat de rand doorzichtig is. Ter plekke van de rand schijnt daardoor de achtergrond van het element door. Als je transparent gebruikt, moet je er op bedacht zijn dat browsers die deze waarde niet ondersteunen (bijvoorbeeld Microsoft Internet Explorer) voor de kleur de beginwaarde van de border-color eigenschap aanhouden (de kleur van de tekst). De rand zal dan niet onzichtbaar, maar juist nadrukkelijk aanwezig zijn.

<P STYLE="border-style: solid; border-color: transparent; border-width: 10px; color: #000000; background-color: #FFFF99;">Voor dit P element is de border-color eigenschap gebruikt met de waarde transparent.</P>

De border-color eigenschap is een verkorte weergave van de eigenschappen border-top-color, border-right-color, border-bottom-color en border-left-color. Je kunt dan ook meerdere waarden tegelijk opnemen. In de eerdere voorbeelden is te zien, dat je met één waarde de kleur van alle randen tegelijk bepaalt. Wanneer je twee waarden opneemt, dan geldt de eerste voor de boven- en onderrand en de tweede voor de rechter- en linkerrand.

<P STYLE="border-style: solid; border-color: #3399CC #336699;">Voor dit P element is de border-color eigenschap gebruikt met twee waarden.</P>

Wanneer je drie waarden opneemt, dan geldt de eerste waarde voor de bovenrand, de tweede waarde voor zowel de rechter- als de linkerrand en de derde waarde voor de onderrand.

<P STYLE="border-style: solid; border-color: #33CC99 #336699 #3399CC;">Voor dit P element is de border-color eigenschap gebruikt met drie waarden.</P>

Wanneer je vier waarden opneemt, dan geldt als volgorde de bovenrand, de rechterrand, de onderrand en de linkerrand.

<P STYLE="border-style: solid; border-color: #336699 #3399CC #3399CC #336699;">Voor dit P element is de border-color eigenschap gebruikt met vier waarden.</P>

Je kunt de verschillende notaties voor de kleur gewoon door elkaar gebruiken.

<P STYLE="border-style: solid; border-color: rgb(51,102,153) #33CC99 red;">Voor dit P element is de border-color eigenschap gebruikt met drie waarden.</P>

Legenda | Beschrijving | Randen | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 16 januari 2005