{"id":154,"date":"2013-03-24T13:47:17","date_gmt":"2013-03-24T12:47:17","guid":{"rendered":"https:\/\/bobdewebbouwer.com\/?p=154"},"modified":"2025-11-10T07:58:18","modified_gmt":"2025-11-10T06:58:18","slug":"ronde-hoeken-css-3","status":"publish","type":"post","link":"https:\/\/clean.bobbouwt.nl\/index.php\/2013\/03\/24\/ronde-hoeken-css-3\/","title":{"rendered":"Ronde hoeken met CSS 3"},"content":{"rendered":"<p>In deze\u00a0CSS tutorial lees je hoe je afgeronde hoeken maakt met CSS 3.<!--more--><\/p>\n<p>Het toevoegen van ronde hoeken met CSS is\u00a0een kwestie van 1 regeltje code toevoegen aan de div die je ronde hoeken wilt geven:<\/p>\n<div class=\"rond\"><strong>border-radius: \u00a010px;<\/strong><\/div>\n<p>Hoe hoger het cijfer achter border-radius, hoe groter de afgeronde hoeken worden.<\/p>\n<div class=\"rond1\">border-radius:\u00a0 30px;<\/div>\n<p>En vanzelfsprekend kun je de border-radius ook combineren met een gekleurde rand<br \/> (in onderstaand voorbeeld een zwarte rand van 2px)<\/p>\n<div class=\"rond2\">border-radius:\u00a0 10px;\u00a0<br \/>\nborder:\u00a0 2px \u00a0solid\u00a0 #000;<\/div>\n<h2>Ongelijkmatige\u00a0afgeronde hoeken CSS<\/h2>\n<p>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.\u00a0Bij de tabbladen van ons menu bijvoorbeeld zijn alleen de bovenste twee hoeken afgerond.<\/p>\n<p>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.<\/p>\n<div class=\"rond3\">border-radius:\u00a0 10px\u00a0 50px\u00a0 10px\u00a0 0px;<\/div>\n<h2>Afgeronde hoeken in CSS met een percentage<\/h2>\n<p>Je kunt de mate waarin de hoeken moeten worden afgerond opgeven in pixels (px) maar je kunt ook percentages gebruiken:<\/p>\n<div class=\"rond5\">border-radius: 30%<\/div>\n<h2>Cirkel maken in CSS<\/h2>\n<p>Nog een leuk truckje: Als je een border-radius van 100% opgeeft kun je zelfs een cirkel maken, volledig in CSS!<br \/> Vergeet niet ook een gelijke hoogte en breedte op te geven (in onderstaand voorbeeld 100px), anders krijg je een ovaal.<\/p>\n<div class=\"rond4\">\n<p>border-radius: 100%<\/p>\n<\/div>\n<p>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).<\/p>\n<div class=\"rond6\"><\/div>\n<h2 id=\"hulp\">Hulp nodig met je website?<\/h2>\n<p>Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig <a title=\"Bekijk het overzicht van alle artikelen op Bobs Blog\" href=\"\/blog\/\">blogt<\/a> over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een <a href=\"\/website-laten-bouwen\/\">website voor je te bouwen<\/a>, <a href=\"\/website-laten-verbeteren\/\">jouw website te verbeteren<\/a> of een <a href=\"\/wordpress-training\">training<\/a> over dit onderwerp te verzorgen.<\/p>\n<p><a class=\"pijl\" href=\"\/contact\/\">Vraag direct een vrijblijvende offerte aan<\/a><\/p>\n<p><strong>Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?<\/strong><br \/><strong>Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld \ud83d\ude42<\/strong><\/p>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In deze\u00a0CSS tutorial lees je hoe je afgeronde hoeken maakt met CSS 3.<\/p>\n","protected":false},"author":2,"featured_media":8119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,14,2],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-design","category-tutorial"],"_links":{"self":[{"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":1,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":18894,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/posts\/154\/revisions\/18894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/media\/8119"}],"wp:attachment":[{"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clean.bobbouwt.nl\/index.php\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}