040 848 80 69 bob@bobdewebbouwer.com

In deze CSS tutorial lees je hoe je afgeronde hoeken maakt met CSS 3.

Het toevoegen van ronde hoeken met CSS is een kwestie van 1 regeltje code toevoegen aan de div die je ronde hoeken wilt geven:

border-radius:  10px;

Hoe hoger het cijfer achter border-radius, hoe groter de afgeronde hoeken worden.

border-radius:  30px;

En vanzelfsprekend kun je de border-radius ook combineren met een gekleurde rand
(in onderstaand voorbeeld een zwarte rand van 2px)

border-radius:  10px; 
border:  2px  solid  #000;

Ongelijkmatige afgeronde hoeken CSS

In bovenstaande voorbeelden zijn alle hoeken van de box (dat is de div dus) gelijkmatig afgerond. Het is echter ook mogelijk de verschillende hoeken apart van elkaar in te stellen. Bij de tabbladen van ons menu bijvoorbeeld zijn alleen de bovenste twee hoeken afgerond.

Om dit te bereiken gebruik je de zogenaamde shorthand notatie die je ook kunt gebruiken voor je margin en padding. Je kunt dus voor iedere hoek een waarde opgeven. De waarden gaan met de klok mee, dus de eerste waarde is voor de hoek linksboven, de tweede voor de hoek rechtsboven, de derde voor de hoek rechtsonder en de laatste voor de hoek linksonder.

border-radius:  10px  50px  10px  0px;

Afgeronde hoeken in CSS met een percentage

Je kunt de mate waarin de hoeken moeten worden afgerond opgeven in pixels (px) maar je kunt ook percentages gebruiken:

border-radius: 30%

Cirkel maken in CSS

Nog een leuk truckje: Als je een border-radius van 100% opgeeft kun je zelfs een cirkel maken, volledig in CSS!
Vergeet niet ook een gelijke hoogte en breedte op te geven (in onderstaand voorbeeld 100px), anders krijg je een ovaal.

border-radius: 100%

En natuurlijk kun je ook nu weer met borders spelen om een leuk effect te krijgen (in onderstaand voorbeeld is gebruik gemaakt van de mogelijkheid in CSS om iedere border een andere kleur te geven).

Hulp nodig met je website?

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.

Vraag direct een vrijblijvende offerte aan

Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂

Bedrag





Gerelateerde artikelen