Randen en afmetingen

Wat ga je leren?

Je leert hoe je elementen een rand geeft, hoe je hoeken afrondt, en hoe je een element een vaste breedte en hoogte geeft.

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

De hoeken worden zo rond dat het element een cirkel of ovaal wordt. Met 50% worden de hoeken zo afgerond dat de helft van het element verdwijnt — alles wat overblijft is een ronde vorm.

Probeer het zelf!

Editor laden...

Investigate

Experimenteer:

• Verander border naar 5px dashed red — wat zie je?
• Zet border-radius op 20px, dan op 50% — wat is het verschil?
• Verwijder width: 300px — hoe breed wordt het kaartje?
• Voeg height: 200px toe — wat gebeurt er met de hoogte?

Modify

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

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.

Tip

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

Antwoord

<!-- HTML -->
<div>
  <h2>Emma de Vries</h2>
  <p>Web Developer</p>
</div>

/* CSS */
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.

---

← Flexbox | Semantische HTML →