Randen

De meeste HTML elementen hebben niet automatisch een rand ("border"), maar CSS geeft je allerlei mogelijkheden om ze te maken. Er is een uitgebreid stel properties voor randen; er zijn er zelfs zo veel dat je soms door de bomen het bos niet meer ziet. Maar de border properties die je het meest gebruikt (color=kleur, width=dikte en style=stijl) vormen de basis die we nu illustreren:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 2px;
	border-style: solid;
}
</style>

<div class="box">
	Hello, world!
</div>

Elementairder wordt het niet - met het gebruik van de border-style, border-color en border-width properties, kunnen we zo'n beetje elke rand maken die we willen. Laten we die drie properties wat nader bekijken.

Kleur van randen

Color (kleur) is een alledaagse eigenschap, die je niet alleen voor borders (randen), maar ook voor andere CSS properties, op verschillende manieren kan definiëren. Later in deze handleiding lopen we de manieren langs waarop je kleuren kan aangeven in CSS.

Dikte van randen

De dikte van randen kan worden aangegeven zoals alle groottes: in absolute of relatieve lengte eenheden. Voor de property "border-width" (randdikte) bestaan een paar voorgekookte values: "thin" (dun), "medium" (gemiddeld), of "thick" (dik). Als je die waarden gebruikt laat je het in feite aan de browser over hoe ze eruit gaan zien. Dit betekent dat je niet precies weet hoe je werk in verschillende browsers getoond zal worden.

Stijl van randen

Er is een uitgebreide selectie van values voor de property "border-style" (stijl van rand). De meest toegepaste value is "solid", maar er zijn er veel meer: hidden (verborgen), dotted (gestippeld), dashed (gestreept), solid (doorgetrokken), double (dubbel), groove (met groef), ridge (met richel), inset en outset. Hoe ze er uitzien? Probeer het volgende voorbeeld:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 4px;
	margin: 10px;
	float: left;
}
</style>

<div class="box" style="border-style: dashed;">Dashed</div>
<div class="box" style="border-style: dotted;">Dotted</div>
<div class="box" style="border-style: double;">Double</div>
<div class="box" style="border-style: groove;">Groove</div>
<div class="box" style="border-style: inset;">Inset</div>
<div class="box" style="border-style: outset;">Outset</div>
<div class="box" style="border-style: ridge;">Ridge</div>
<div class="box" style="border-style: solid;">Solid</div>

Verkorte versies

We zijn eerder verkorte namen tegen gekomen waarbij een verkorte property naam gebruikt werd om meerdere values toe te kennen. In het eerste border voorbeeld boven gebruikten we de drie verkorte namen "border-x" (x is width, style, color) om in één klap een border property aan alle vier de randen toe te kennen. Bijvoorbeeld de verkorte versie "border-style" staat voor de langere versies: border-top-style, border-right-style, border-bottom-style en border-left-style. Hetzelfde geldt natuurlijk voor "border-width" en "border-color".

De border-x properties kregen boven slechts één value toegekend, deze waarde werd toegepast op alle vier de zijdes. Maar net als we gezien hebben voor margins, kunnen de border-x properties differentiëren naar zijdes, in de volgorde: top, right, bottom en left (start bovenaan en ga met de klok mee). Dus net als margins kunnen de border-x properties van 1 tot 4 values toegekend krijgen. Hier volgt een voorbeeld waar elke zijde een andere value krijgt:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-style: solid dashed ridge dotted;
	border-color: CornflowerBlue Chartreuse CadetBlue Chocolate;
	border-width: 1px 2px 3px 4px;
}
</style>

<div class="box">
	Hello, world!
</div>

Het uiteindelijke resultaat is een rare box die je in de praktijk niet gauw zal tegenkomen, maar het gaat er maar om dat je ziet hoe het werkt.

Zonder verkortingen zou je 12 property namen moeten hebben in plaats van de drie border-x namen (x is width, style, color). Maar het kan nog korter: border-x kan verkort worden tot border, als we afspreken dat de values toegekend worden in de volgorde: width, style, color. Hier is een voorbeeld waar alle vier de zijdes dezelfde width, style en color krijgen:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 2px solid CornflowerBlue;
}
</style>

<div class="box">
	Hello, world!
</div>

Dus we bespaarden ons nog wat meer type-werk. Als je niet de juiste volgorde (width, style, color) gebruikt, zal de browser toch proberen er iets zinnigs van te maken; maar het is natuurlijk beter dat je je aan de afgesproken volgorde houdt. Je kan ook minder dan drie values toekennen aan border en ook dan zal de browser proberen het goed te doen met de invulling van standaardwaarden voor de ontbrekende values.

Border radius

Versie 3 van CSS kreeg de mogelijkheid om box-randen met afgeronde hoeken te maken; dit werd verwezenlijkt door de invoering van de property "border-radius" (radius is in het Nederlands "straal", als in "straal" van een cirkel). Ronde hoeken klinken voor jongere webpagina ontwikkelaars waarschijnlijk als niets bijzonders, maar vóór de invoering van CSS 3 zijn er honderden artikelen geschreven over hoe je het beste je hoeken rond kon maken.

Maar gelukkig, dat is verleden tijd en het is nu een fluitje van een cent om je hoeken rond te krijgen.

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 3px solid CornflowerBlue;
	border-radius: 5px;
}
</style>

<div class="box">
	Hello, world!
</div>

Het enige nadeel is dat Microsoft Internet Explorer 8 en oudere versies het niet aan kunnen, ze maken hoeken altijd recht. Je zal niet verbaasd zijn dat "border-radius" een verkorte variant is van border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius (begin linksboven en ga met de klok mee).

Ook de border-radius property kan absolute en relatieve eenheden aan, zoals vrijwel alle CSS lengte eenheden. In het volgende voorbeeld gebruiken we een relatieve eenheid om een cirkel met straal 50px (50% van de width en de height van de parent) te maken. Het is een aardig experiment om in het volgende voorbeeld de afmetingen van de parent te wijzigen en zo ellipsen te maken:

<style type="text/css">
.circle {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
	border-radius: 50%;
}
</style>

<div class="circle"></div>

Wel aardig, niet?

Samenvatting

Borders zijn een belangrijk stuk gereedschap in de vormgeving van een webpagina. Ze zijn flexibel en gemakkelijk te gebruiken. De vele verkorte versies met hun values zijn in het begin wel een beetje lastig te onthouden, maar na een tijdje ken je ze wel en merk je dat ze toch wel gemakkelijk zijn.