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 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.

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.