Randen en afmetingen

Wat ga je leren?

Een rand om een element, ronde hoeken, en een vaste breedte en hoogte.

Theorie

In Ruimte rond elementen leerde je over padding en margin. Nu voegen we drie nieuwe stijlen toe:

Eigenschap	Wat het doet	Voorbeeld
border	Een rand om het element	border: 2px solid blue;
border-radius	Ronde hoeken	border-radius: 8px;
width	Vaste breedte	width: 300px;
height	Vaste hoogte	height: 100px;

Border in detail

Een border heeft drie waarden achter elkaar: dikte, stijl en kleur:

border: 3px dashed red;
/*       ↑     ↑      ↑
       dikte stijl  kleur */

Veelgebruikte stijlen: solid (doorgetrokken), dashed (streepjes), dotted (puntjes).

Predict

Wat zie je als je border-radius: 8px verhoogt naar border-radius: 50%?

Klik hier voor het antwoord

Het element wordt een cirkel of ovaal. Bij 50% is elke hoekronding de helft van de doos, en dan raken de vier rondingen elkaar precies in het midden van elke zijde; er blijft geen recht stuk rand meer over. Is de doos even breed als hoog, dan krijg je een cirkel, anders een ovaal.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander de border in 5px dashed red. Wat zie je?
   Antwoord

   Een dikke rode streepjeslijn rond het kaartje. 5px is de dikte, dashed maakt er streepjes van en red is de kleur.
2. Zet border-radius op 20px en daarna op 50%. Wat is het verschil?
   Antwoord

   Met 20px worden de hoeken ronder dan met 8px. Met 50% wordt het kaartje een ovaal: elke hoek buigt af tot halverwege de breedte en de hoogte. Een cirkel krijg je zo alleen bij een vierkant blok.
3. Verwijder width: 300px. Hoe breed wordt het kaartje?
   Antwoord

   Zo breed als het voorbeeld. Een div is een blok, en een blok zonder width vult de hele breedte van zijn ouder.
4. Voeg height: 200px toe. Wat gebeurt er met de hoogte?
   Antwoord

   Het kaartje wordt hoger dan de tekst nodig heeft, met lege ruimte onder de alinea. Met de padding en de rand erbij is het 244 pixels hoog, want height telt alleen de binnenkant.

Editor laden...

Modify

Opdracht: Maak een rond knop-element van 100x100 pixels met een rode achtergrond en een dikke witte rand.

Editor laden...

Tip

Combineer width, height, background-color, border en border-radius: 50%.

Antwoord

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 4px solid white;
  border-radius: 50%;
}

Make

Opdracht: Ontwerp een profielkaartje. Geef het een vaste breedte (bijv. 250px), een mooie rand, afgeronde hoeken en een zachte achtergrondkleur. Zet er een naam (<h2>) en een rol (<p>) in.

Editor laden...

Tip

Begin met een <div> als omhulsel. Combineer width, border, border-radius, padding en background-color.

Antwoord

<div>
  <h2>Emma de Vries</h2>
  <p>Web Developer</p>
</div>

div {
  width: 250px;
  background-color: #fafafa;
  border: 2px solid #4a90e2;
  border-radius: 12px;
  padding: 20px;
}

Bonus: box-sizing: border-box

Standaard telt CSS width: 300px alleen voor de inhoud — padding en border komen er nog bovenop. Een box met width: 300px, padding: 20px en border: 2px is in totaal 344px breed.

Dat is verwarrend. De oplossing: zet box-sizing: border-box. Dan rekent CSS padding en border mee in de breedte, en width: 300px is écht 300px.

* {
  box-sizing: border-box;  /* geldt voor alle elementen */
}

In de praktijk zet bijna iedere ontwikkelaar dit in de eerste regels van zijn CSS. Daarna kun je width en padding combineren zonder rekenwerk.

Er gaat iets mis

Width zonder eenheid

/* Fout: geen eenheid */
div {
  width: 300;
}

CSS-waarden voor afmetingen hebben altijd een eenheid nodig — meestal px (pixels), rem of %. Zonder eenheid negeert de browser de regel en blijft het element zijn standaardbreedte houden. Schrijf altijd width: 300px, niet width: 300. Welke eenheid je wanneer kiest, en waarom border-radius: 50% een cirkel maakt, staat in Eenheden in CSS.