Websites met stijl

Naslag: border

Op dit naslagblad

Border aan alle zijden gelijk
- Vorm
- Gedrag
- Stijlen
Border niet aan alle zijden gelijk
De eigenschap border-radius
- Afzonderlijke hoeken specificeren

Border aan alle zijden gelijk

De eigenschap border bepaalt de eigenschappen van de rand om een element.

Border maakt deel uit van het box-model. Zie daarvoor: naslag box-model

Naast border is er tweede soor kader: outline. Zie de naslag outline

Border kan gebruikt worden als de rand aan alle zijden hetzelfde is.

Als dit niet het geval, lees dan verder bij Border niet aan alle zijden gelijk

Vorm

border: dikte stijl kleur;

dikte: de dikte van de rand (thin, medium (standaard), thick, of een waarde in px).
stijl: zie de tabel met stijlen hieronder.
kleur: de kleur van de rand. Die mag op elke manier worden opgegeven (naam, hsl, rgb, hex).

De waarden van de border moeten worden opgegeven in de volgorde: dikte stijl kleur. Waarden mogen worden overgeslagen, bv.border: solid red, border: thick double. De niet genoemde waarden zijn dan de standaard waarden.

Gedrag

standaard	medium none color
vererft	nee

standaard color: de voorgrondkleur van het element

Stijlen

naam	stijl	voorbeeld stijlregel
none	(geen border)	border-style: none;
dotted		border: 2px dotted blue;
dashed		border: 2px dashed blue;
solid		border: 1px solid blue;
double		border: 4px double blue;
groove		border: 6px groove blue;
ridge		border: 6px ridge blue;
inset		border: 6px inset blue;
outset		border: 6px outset blue;

Border niet aan alle zijden gelijk

Border per zijde

Als niet alle zijden van de border hetzelfde zijn, kan de border per zijde worden opgegeven met de eigenschappen border-top, border-right, border-bottom en border-left. voorbeeld: div {
border-top: 1px dashed red;
border-bottom: 2px dotted blue;
border-left: 8px solid green;
border-right: 8px solid magenta;
} resultaat:

Border-width, border-style, border-color

Als niet alle zijden van de border hetzelfde zijn, kan de border ook worden opgegeven met de eigenschappen border-width, border-style, border-color (Steeds voor achtereenvolgens boven, rechts, onder, links): voorbeeld: div {
border-width: 4px 1px 1px 1px;
border-style: solid dashed dashed dashed;
border-color: red black black black;
} resultaat:

Varianten

Met de hiervoor genoemde methoden kan bijna elk type kader gemaakt worden. Alleen voor afgeronde hoeken is nog een extra stjlregel nodig. Zie verderop dit blad, bij de eigenschap border-radius.

Toch zijn er nog een flink aantal varianten van de border-eigenschap die soms van pas kunnen komen, bijvoorbeeld als maar één zijde hoeft te worden ingesteld. Zie de voorbeelden:

Nog specifieker
border-top: 1px solid blue;	Bovenrand: blauwe lijn, 1px breed
border-right: 3px solid black;	Rechter rand: zwarte lijn, 3px breed
border-bottom: 1px dotted blue;	Onderrand: blauwe stippellijn, 1px breed
border-left: 3px solid green;	Linker rand: groene lijn, 3px breed
border-top-width: 10px;	breedte bovenrand: 10px
border-right-width: 10px;	breedte rechter rand: 10px
border-bottom-width: 10px;	breedte onderrand: 10px
border-left-width: 10px;	breedte linker rand: 10px
border-top-style: dotted;	stijl bovenrand: stippellijn
border-right-style: dotted	stijl rechter rand: stippellijn
border-bottom-style: dotted;	stijl onderrand: stippellijn
border-left-style: dotted;	stijl linker rand: stippellijn
border-top-color: red;	kleur bovenrand: rood
border-right-color: red;	kleur rechter rand: rood
border-bottom-color: red;	kleur onderrand: rood
border-left-color: red;	kleur linker rand: rood

De eigenschap border-radius

In css 3 is de eigenschap border-radius toegevoegd. Hiermee is het mogelijk om een element van afgeronde hoeken te voorzien.

Standaard zijn er 4 attributen voor achtereenvolgend de hoeken linksboven, rechtsboven, rechtsonder, linksonder. Voor elk wordt de straal van de afronding opgegeven in px.

Er zijn ook verkorte vormen met 2 of 1 attribuut:

border-radius: li-bo re-bo re-on li-on;	(4 attributen)
border-radius: li-bo re-bo;	(2 attributen, als li-bo = re-on en re-bo = li-on)
border-radius: straal;	(1 attribuut, als alle hoeken gelijk)

(li-bo: linksboven, re-bo:rechtsboven, li-on: linksonder, re-on: rechtsonder; waarden opgeven in px)

Afzonderlijke hoeken specificeren

Elke hoek kan ook afzonderlijk worden gespecificeerd, bv:
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 25px;

Voorbeelden

Bij de onderstaande voorbeelden is uitgegaan van een division van 40px hoog en 200px breed met een groene achtergrondkleur (in voorbeeld 3 is de division 40px breed).

voorbeeld 1 - zwarte border met vier gelijke afgeronde hoeken: div {border: 2px solid; border-radius: 15px;}

resultaat:

voorbeeld 2 - als voorbeeld 1, zonder border en met een afronding van de halve hoogte: div {border-radius: 20px;}

resultaat:

voorbeeld 3 - div heeft gelijke hoogte en breedte en een afrondingstraal van halve hoogte: div {border-radius: 20px; width: 40px; height: 40px; }

resultaat:

voorbeeld 4 - links 20px en rechts geen afronding: div {border-radius: 20px 0 0 20px;}

resultaat:

voorbeeld 5 - als voorbeeld 4 met boven een donkerblauwe border: div {border-radiuss: 20px 0 0 20px; border-top: 6px solid navy; }

resultaat:

Standaard waarde en vererving

standaard	geen afronding (border-radius: 0;)
vererft	nee