CSS voorbeelden eigenschap border-style


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


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

De waarden solid, dotted en dashed van de border-style eigenschap zorgen voor een vlakke rand. Bij solid gaat het om een doorgaande rand, bij dotted om een rand bestaande uit punten en bij dashed om een rand bestaande uit streepjes. De kleur van de rand wordt bepaald door de border-color eigenschap. Als deze eigenschap niet is opgenomen, dan wordt de voor het element geldende waarde van de color eigenschap aangehouden. De rand heeft dan dus dezelfde kleur als de tekst. Als de border-width eigenschap ontbreekt, geldt voor de breedte van de rand de beginwaarde medium.

<P STYLE="border-style: solid;">Voor dit P element is de border-style eigenschap gebruikt met de waarde solid.</P>
<P STYLE="border-style: dotted;">Voor dit P element is de border-style eigenschap gebruikt met de waarde dotted.</P>
<P STYLE="border-style: dashed;">Voor dit P element is de border-style eigenschap gebruikt met de waarde dashed.</P>

Voorbeeld border-style

De waarde double zorgt voor een dubbele vlakke rand. Om de dubbele rand goed te kunnen zien, moet de rand niet te smal zijn. Daarom is in dit geval ook de border-width eigenschap opgenomen.

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

Voorbeeld border-style

De waarden groove, ridge, inset en outset hebben randen met 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 door de border-color eigenschap, of bij het ontbreken daarvan door de voor het element geldende waarde van de color eigenschap. Welke kleuren precies gebruikt worden voor de lichte en donkere delen hangt af van de browser. De border-width eigenschap is ook in dit geval 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-width: 6px;">Voor dit P element is de border-style eigenschap gebruikt met de waarde groove.</P>
<P STYLE="border-style: ridge; border-width: 6px;">Voor dit P element is de border-style eigenschap gebruikt met de waarde ridge.</P>
<P STYLE="border-style: inset; border-width: 6px;">Voor dit P element is de border-style eigenschap gebruikt met de waarde inset.</P>
<P STYLE="border-style: outset; border-width: 6px;">Voor dit P element is de border-style eigenschap gebruikt met de waarde outset.</P>

Voorbeeld border-style

De waarde none voor de border-style eigenschap zorgt ervoor dat er geen rand wordt weergegeven. Je kunt hier bijvoorbeeld van gebruik maken, als je wilt dat een algemene stijl voor de rand van een element (die bijvoorbeeld is vastgelegd met de border eigenschap) in een specifieke situatie wordt genegeerd. In het volgende voorbeeld is voor het tweede P element met behulp van een inline stijl vastgelegd, dat geen rand moet worden weergegeven.

<P>Voor dit P element is geen inline stijl opgenomen.</P>
<P STYLE="border-style: none;">Voor dit P element is in een inline stijl de border-style eigenschap opgenomen met de waarde none.</P>

In een stijlblok in de head van het document is een stijlregel opgenomen die om elk P element een rand van 2 pixels breed plaatst.

P { border: 2px solid #C0C0C0; }

Het eerste P element krijgt de rand die gedefinieerd is in het stijlblok. Bij het tweede P element blijft de rand achterwege.

Voorbeeld border-style

De waarde hidden voor de border-style eigenschap heeft meestal hetzelfde effect als de waarde none. Alleen als hidden gebruikt wordt in een tabel met samenvallende tabelranden is er een duidelijk verschil. In dat soort tabellen kan er sprake zijn van conflicten tussen de randen die voor de verschillende elementen zijn gedefinieerd. Om dat soort conflicten op te lossen zijn een aantal regels opgesteld. Volgens deze regels heeft de waarde none de laagste prioriteit: zolang de border-style eigenschap voor één van de samenvallende randen een andere waarde heeft dan none, wordt de rand weergegeven. De waarde hidden daarentegen heeft de hoogste prioriteit. Als de border-style eigenschap voor één van de samenvallende randen deze waarde heeft, dan wordt de rand niet weergegeven. In de volgende voorbeelden wordt dat gedemonstreerd met de volgende tabel.

<TABLE>
<TR>
<TD>a1</TD><TD>a2</TD><TD>a3</TD>
</TR>
<TR>
<TD>b1</TD><TD>b2</TD><TD>b3</TD>
</TR>
</TABLE>

In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen:

TABLE { border-collapse: collapse; border-style: none; }
TD    { border: solid 2px #C0C0C0; text-align: center; width: 70px; }

Ondanks dat de border-style eigenschap is opgenomen met de waarde none, wordt de buitenrand van de tabel gewoon weergegeven. De stijl van het TD element wint het van de stijl van het TABLE element.

Voorbeeld border-style

Als in het stijlblok voor het TABLE element de border-style eigenschap wordt opgenomen met de waarde hidden, dan wint de stijl van het TABLE element het van de stijl van het TD element. De buitenrand van de tabel wordt nu (in een browser die hidden ondersteunt) dus niet weergegeven.

TABLE { border-collapse: collapse; border-style: hidden; }
TD    { border: solid 2px #C0C0C0; text-align: center; width: 70px; }

Voorbeeld border-style

De border-style eigenschap is een verkorte weergave van de eigenschappen border-top-style, border-right-style, border-bottom-style en border-left-style. Je kunt dan ook meerdere waarden tegelijk opnemen. In de eerdere voorbeelden is te zien, dat je met één waarde de stijl 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: dashed solid;">Voor dit P element is de border-style eigenschap gebruikt met twee waarden.</P>

Voorbeeld border-style

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: dotted solid dashed;">Voor dit P element is de border-style eigenschap gebruikt met drie waarden.</P>

Voorbeeld border-style

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

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

Voorbeeld border-style



Legenda | Beschrijving | Randen | CSS eigenschappen | Begin

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