Handleiding HTML - Stijleigenschappen voor de border

Eigenschappen voor de border

Tot de eigenschappen voor de border behoren: border-style, border-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border-top, border-right, border-bottom, border-left en border.

De border eigenschappen kunnen gebruikt worden om een element te accentueren door het plaatsen van een rand langs één of meer zijden. Van deze rand kunnen de stijl, de kleur en de breedte worden gedefinieerd. Meestal zal dat gecombineerd gebeuren met behulp van de eigenschappen border-top, border-right, border-bottom, border-left en border. Wanneer slechts één onderdeel gedefinieerd moet worden, kan ook gebruik gemaakt worden van de eigenschappen border-style, border-color, border-top-width, border-right-width, border-bottom-width, border-left-width en border-width.
Voor een algemene toelichting op de vormgeving van een element, zie de beschrijving van de box.

Bij de voorbeelden van de verschillende eigenschappen is een afbeelding opgenomen, waarop te zien is hoe de weergave zou moeten zijn. Klik op de afbeelding en bekijk in een nieuw venster of de browser het voorbeeld (correct) ondersteunt.

border-style Met de border-style eigenschap wordt de stijl van de rand van een element bepaald. De eigenschap wordt gebruikt indien niet gelijktijdig de kleur en de breedte van de rand worden gedefinieerd met behulp van de eigenschappen border-top, border-right, border-bottom, border-left en border.

Mogelijke waarden zijn none, dotted, dashed, solid, double, groove, ridge, inset en outset.

Bij de waarde double is de som van de twee lijnen en de tussenruimte gelijk aan de waarde zoals opgegeven via de border-width eigenschap. Bij de waarden groove, ridge, inset en outset worden de randen weergegeven in 3D.
Er kunnen één, twee, drie of vier waarden worden opgenomen. Wanneer vier waarden zijn opgenomen, dan geldt als volgorde boven, rechts, onder en links. Wanneer slechts één waarde wordt opgenomen dan geldt deze voor alle zijden. Wanneer twee waarden zijn opgenomen, dan geldt de eerste voor de boven- en onderkant en de tweede voor de rechter- en linkerkant. Wanneer drie waarden zijn opgenomen, dan geldt de tweede waarde voor zowel de rechter- als de linkerkant.

De beginwaarde is none (dit betekent dat altijd de border-style eigenschap gebruikt moet worden om de rand weer te geven).

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De border-style eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
Door Microsoft Internet Explorer 4 en Netscape Navigator 4 worden de waarden dotted en dashed niet ondersteund. Bovendien ondersteunt Netscape Navigator 4 slechts één stijl voor alle vier zijden. Bij Microsoft Internet Explorer 4 worden bij de 3D-randen te donkere kleuren gebruikt. Indien de standaardkleur zwart is (bijvoorbeeld als geen kleur voor de rand is opgegeven), is de weergave van de rand daardoor als bij de waarde solid.

De opbouw is:

border-style: waarde

In het volgende voorbeeld zijn enkele mogelijkheden voor de stijl van de rand gebruikt.
`<H2 STYLE="border-width: 0.4em; border-style: solid">solid</H2>`
Wanneer voor de rand met behulp van de border-color eigenschap een lichtere kleur wordt opgegeven dan de standaardkleur, dan zien de 3D-randen er vaak wat beter uit. Ook in Microsoft Internet Explorer 4 wordt het 3D-effect dan zichtbaar, al is het resultaat nog steeds niet echt fraai.
`<H2 STYLE="border-width: 0.4em; border-style: groove; border-color: white">solid</H2>`

border-color Met de border-color eigenschap wordt de kleur van de rand van een element bepaald. De eigenschap wordt gebruikt indien niet gelijktijdig de stijl en de breedte van de rand worden gedefinieerd met behulp van de eigenschappen border-top, border-right, border-bottom, border-left en border.

Mogelijke waarden zijn een kleurnaam en een RGB-waarde.
Voor het definiëren van de kleur zie Kleuren in HTML/CSS.

Er kunnen één, twee, drie of vier waarden worden opgenomen. Wanneer vier waarden zijn opgenomen, dan geldt als volgorde boven, rechts, onder en links. Wanneer slechts één waarde wordt opgenomen dan geldt deze voor alle zijden. Wanneer twee waarden zijn opgenomen, dan geldt de eerste voor de boven- en onderkant en de tweede voor de rechter- en linkerkant. Wanneer drie waarden zijn opgenomen, dan geldt de tweede waarde voor zowel de rechter- als de linkerkant.

De beginwaarde is de kleur zoals die eventueel bepaald is via de color eigenschap.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De border-color eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Netscape Navigator 4 ondersteunt slechts één kleur voor alle vier zijden (indien meerdere kleuren zijn opgegeven, worden deze gemengd tot één kleur).

De opbouw is:

border-color: waarde

In de volgende voorbeelden wordt de border-color eigenschap gedemonstreerd.
`<H2 STYLE="border-width: thick; border-style: solid; border-color: red">border-color: red</H2>`
Wanneer drie kleuren zijn opgegeven, geldt de eerste voor de bovenkant, de tweede voor de rechter- en linkerkant en de derde voor de onderkant.
`<H2 STYLE="border-width: thick; border-style: solid; border-color: red black green blue">border-color</H2>`

border-top-width
border-right-width
border-bottom-width
border-left-width Met de eigenschappen border-top-width, border-right-width, border-bottom-width en border-left-width wordt de breedte van de rand aan respectievelijk de boven-, de rechter-, de onder- en de linkerkant van een element bepaald. De eigenschap wordt gebruikt indien niet gelijktijdig de stijl en de kleur van de rand worden gedefinieerd met behulp van de eigenschappen border-top, border-right, border-bottom, border-left en border.

Mogelijke waarden zijn thin, medium, thick en lengte.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid.
Negatieve waarden zijn niet toegestaan.

De beginwaarde is medium.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
Netscape Navigator 4 geeft de rand niet correct weer voor zijden waarvoor de border-..-width eigenschap niet is gebruikt. In plaats van de waarde medium aan te houden, wordt de rand weggelaten.

De opbouw is:

border-top-width: waarde

In het volgende voorbeeld worden verschillende waarden gebruikt voor de eigenschappen border-top-width, border-right-width, border-bottom-width en border-left-width.
`<H2 STYLE="border-top-width: thin; border-right-width: medium; ...; border-style: solid">border-top-width: thin; ...</H2>`
Voor de randen waarvoor geen border-..-width eigenschap is opgenomen, moet de beginwaarde medium aangehouden worden.
`<H2 STYLE="border-top-width: thin; border-bottom-width: thin; border-style: solid">border-top-width: thin; ...</H2>`
Wanneer niet voor alle zijden een rand moet worden weergegeven, kan voor de zijden met rand gebruik gemaakt worden van de eigenschappen border-top, border-right, border-bottom en border-left. Een alternatief is het bij de border-style eigenschap voor één of meer zijden opnemen van de waarde none, zoals in het volgende voorbeeld.
`<H2 STYLE="border-left-width: thick; border-style: none none none solid">border-left-width: thick</H2>`

border-width De border-width eigenschap wordt gebruikt om de eigenschappen van de breedte van de rand aan respectievelijk de boven-, de rechter-, de onder- en de linkerkant van een element op verkorte wijze gecombineerd weer te geven. De eigenschap wordt gebruikt indien niet gelijktijdig de stijl en de kleur van de rand worden gedefinieerd met behulp van de border eigenschap.

Mogelijke waarden zijn thin, medium, thick en lengte.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid.
Negatieve waarden zijn niet toegestaan.

Er kunnen één, twee, drie of vier waarden worden opgenomen. Wanneer vier waarden zijn opgenomen, dan geldt als volgorde boven, rechts, onder en links. Wanneer slechts één waarde wordt opgenomen dan geldt deze voor alle zijden. Wanneer twee waarden zijn opgenomen, dan geldt de eerste voor de boven- en onderkant en de tweede voor de rechter- en linkerkant. Wanneer drie waarden zijn opgenomen, dan geldt de tweede waarde voor zowel de rechter- als de linkerkant.

De beginwaarde is medium.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
Netscape Navigator 4 geeft de rand niet correct weer voor zijden waarvoor de border-width eigenschap niet is gebruikt. Inplant van de waarde medium aan te houden, wordt de rand weggelaten.

De opbouw is:

border-width: waarde

In het volgende voorbeeld is de breedte van de rand voor elke kant apart gespecificeerd door middel van de border-width eigenschap. Omdat ook de stijl en de kleur zijn opgegeven, zou het overigens meer voor de hand hebben gelegen de border eigenschap te gebruiken.
`<H2 STYLE="border-style: solid; border-color: red; border-width: medium thin thin medium">border-width</H2>`

border-top
border-right
border-bottom
border-left In de eigenschappen border-top, border-right, border-bottom en border-left kunnen de verschillende eigenschappen van de rand aan respectievelijk de boven-, de rechter-, de onder- en de linkerkant van een element op een verkorte wijze worden gecombineerd.

Mogelijke waarden zijn border-top-width (respectievelijk border-right-width, border-bottom-width en border-left-width), border-style en border-color.

Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen.
Het maakt niet uit in welke volgorde de waarden worden opgenomen.

De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen. Indien een waarde niet is opgegeven, wordt de beginwaarde van de betreffende eigenschap aangehouden.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3 en door Netscape Navigator 4.

De opbouw is:

border-top: waarde

Wanneer meerdere eigenschappen voor rand worden opgegeven, is het verstandig deze te combineren. In het volgende voorbeeld is dat gedaan door middel van de border-left eigenschap.
`<H2 STYLE="border-left: 0.3em solid red">border-left</H2>`

border De border eigenschap wordt gebruikt om de verschillende eigenschappen van de rand van een element op verkorte wijze weer te geven.

Mogelijke waarden zijn border-width, border-style en border-color.

Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen.
Het maakt niet uit in welke volgorde de waarden worden opgenomen.
De opgegeven waarden gelden voor alle vier kanten van het element.

De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen. Indien een waarde niet is opgegeven, wordt de beginwaarde van de betreffende eigenschap aangehouden.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De border eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.

De opbouw is:

border: waarde

In het volgende voorbeeld zijn meerdere eigenschappen voor de rand gecombineerd door middel van de border eigenschap.
`<H2 STYLE="border: 0.3em solid red">border: 0.3em solid red</H2>`
Wanneer voor één van de eigenschappen geen waarde wordt opgegeven, wordt de beginwaarde van die eigenschap aangehouden. In het volgende voorbeeld is de breedte niet opgenomen en de browser moet dus de waarde medium aanhouden.
`<H2 STYLE="border: solid red">border: solid red</H2>`

Inhoud Handleiding HTML Index Overzicht stijleigenschappen