07 - CSS - border

• ICT
• MBO
• Studiejaar 1,2

Borders in CSS

Leerdoel

Aan het einde van de les kun je uitleggen wat de term 'border' betekent in CSS en hoe je het kunt gebruiken.

Wat weet je al over het gebruik van de term 'border' in CSS?

Inleiding

Border in CSS verwijst naar de rand van een element zoals een tekstvak of een afbeelding. Het kan worden gebruikt om de stijl, dikte, kleur en vorm van de rand aan te passen.

Border-stijlen

Er zijn verschillende stijlen die je kunt gebruiken voor een border, zoals solid, dashed, dotted, double, groove, ridge, inset en outset.

p { border-style: dotted; }

p { border-style: dashed; }

p { border-style: solid; }

p { border-style: double; }

Border-dikte

Met CSS kun je de dikte van de border aanpassen met behulp van de 'border-width' eigenschap. Je kunt waarden opgeven in pixels, percentages of andere eenheden.

p {

    border-style: solid;

    border-width: 5px;

}

Border-kleur

Met CSS kun je de kleur van de border aanpassen met behulp van de 'border-color' eigenschap. Je kunt een kleur opgeven als naam, hexadecimale waarde of RGB-waarde.

p {

    border-style: solid;

    border-color: red;

}

Border-radius

Border-radius wordt gebruikt om de hoeken van een element af te ronden. Het kan worden toegepast op alle vier de hoeken of individueel op elke hoek.

p {

    border: 2px solid red;

    border-radius: 12px;

}

Opdracht

Samenvatting

Je hebt nu geleerd wat de term 'border' betekent in CSS en hoe je het kunt gebruiken om de stijl, dikte, kleur en vorm van de rand van een element aan te passen.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.