CSS voorbeelden eigenschap border-bottom-style


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


De border-bottom-style eigenschap kun je gebruiken om de stijl voor de onderrand van een element te bepalen.

De waarden solid, dotted en dashed van de border-bottom-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-bottom-color (of 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-bottom-width (of de border-width) eigenschap ontbreekt, geldt voor de breedte van de rand de beginwaarde medium.

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

Voorbeeld border-bottom-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-bottom-width eigenschap opgenomen.

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

Voorbeeld border-bottom-style

De waarden groove, ridge, inset en outset hebben randen met lichte en donkere delen en geven daardoor een 3-D effect. Je gebruikt ze vooral voor alle vier zijden tegelijk. Voorbeelden zijn te zien bij de border-style eigenschap.

Ook voorbeelden van de waarden none en hidden zijn (voor alle vier zijden tegelijk) te zien bij de border-style eigenschap.



Legenda | Beschrijving | Randen | CSS eigenschappen | Begin

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