Skip links en inhoudsopgave

Laatst aangepast: .

Ronde hoeken zonder gebruik van afbeeldingen (border-radius)

Korte omschrijving

Voor een kader of achtergrond met ronde hoeken worden meestal afbeeldingen gebruikt. css3 heeft de eigenschap border-radius, waarmee zonder afbeeldingen ronde hoeken kunnen worden gemaakt.

Omdat dit niet werkt in Internet Explorer 7 en 8, wordt voor die browsers een zogenaamde behavior gebruikt.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Het maken van een kader of een achtergrond met ronde hoeken is altijd behoorlijk ingewikkeld geweest. Althans: om het op een goede manier te doen.

'Een goede manier' wil zeggen, dat de constructie ook intact moet blijven bij andere lettergroottes en bij zoomen. De meeste manieren die je op internet kunt vinden, voldoen niet aan die eis: bij zoomen of bij een andere lettergrootte dondert de hele constructie in elkaar.

Zonder één of meer afbeeldingen te gebruiken, is het vrijwel onmogelijk ronde hoeken te maken. En mét afbeeldingen kan het nog steeds knap ingewikkeld zijn, afhankelijk van wat je precies wilt. Uit het feit dat er tientallen, mogelijk zelfs honderden, manieren zijn bedacht om dit te toen, kun je al afleiden, dat er kennelijk niet één echt goede techniek is.

css3 kent een nieuwe eigenschap: border-radius. Met behulp hiervan is het heel simpel om ronde hoeken te maken. En zelfs meer dan dat. De vier hoeken hoeven niet dezelfde ronding te hebben, je kunt het per hoek opgeven. Bovendien kun je hoogte en breedte van de hoek afzonderlijk van elkaar instellen. Op deze manier zou je zelfs een ellips kunnen maken, en ook het maken van een cirkel is heel simpel. Hoewel bij vormen als een ellips en een cirkel snel problemen kunnen ontstaan als bijvoorbeeld de lettergrootte wordt gewijzigd.

De naam border-radius is wat ongelukkig gekozen, omdat hij tot misverstanden leidt. In tegenstelling tot wat veel mensen denken, hoeft er helemaal geen border aanwezig te zijn. Ook een achtergrondkleur of -afbeelding wordt afgerond, zoals in het onderste voorbeeld is te zien. De daar gebruikte achtergrond-afbeelding is gewoon vierkant, maar wordt in de hoeken keurig afgerond door border-radius.

Helaas werkt border-radius pas in Internet Explorer 9. Voor Internet Explorer 7 en 8 wordt daarom een behavior gebruikt. Dat is een constructie, die alleen in Internet Explorer werkt. Het importeert een bestand waarin JavaScript en Vector Markup Language (VML) staan. VML is een taal voor grafische constructies die alleen in Internet Explorer werkt, het is geen standaard. Alle andere browsers gebruiken de standaardtaal SVG (Scalable Vector Graphics). Internet Explorer 9 ondersteunt eindelijk ook SVG, maar vooralsnog veel minder dan alle andere browsers.

In Internet Explorer 7 en 8 wordt dus een bestand geïmporteerd: border-radius.htc. Dit bestand zorgt ervoor dat ook Internet Explorer 7 en 8 border-radius herkennen, maar wel met beperkingen.

Verschillende hoeken zijn niet mogelijk: alle hoeken zijn even groot. Verder zijn lengte en breedte van de hoeken niet apart in te stellen. Als je een border gebruikt die uit vier kleuren bestaat, wordt alleen de eerste kleur herkend.

Het is dus belangrijk om border-radius heel goed te testen in Internet Explorer.

Een volledig overzicht van problemen bij Internet Explorer staat bij Bekende problemen.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html> <html lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.html.

Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan al veilig worden gebruikt.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style>

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

margin: 0; padding: 0;

Slim om te doen, is soms wat afwijkend in verschillende browsers.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

In dit voorbeeld wordt geen em gebruikt bij lettergroottes, omdat het veranderen van de lettergrootte in Internet Explorer problemen geeft bij het gebruik van border-radius. Maar op de meeste pagina's zal niet alles binnen een element met ronde hoeken staan, dus dan is deze methode wel zinvol.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

background: #ff9;

Achtergrondkleurtje.

code

Binnen de elementen met ronde hoeken is de code weergegeven, die voor die ronde hoeken zorgt. Voor code bestaat de tag <code>, dus heb ik de code die je ziet binnen deze tag gezet.

font-family: Arial, Helvetica, sans-serif; code heeft in de regel als effect, dat de browser een afwijkende letter gebruikt. En in de regel vind ik dat foeilelijk en onduidelijk. Daarom geef ik zelf een font op. Deze fonts heb ik ook al bij body opgegeven, maar de browser kiest, als hij <code> ontmoet, toch voor z'n eigen font. Door hier nogmaals dezelfde fonts als bij body op te geven, krijg ik uiteindelijk toch mijn zin.
#hoeken-1

Het element met id="hoeken-1". Dit is de div met het eerste voorbeeld.

Vier gelijke ronde hoeken

width: 744px;

De breedte is alleen maar nodig om de div met de methode gelijk hieronder horizontaal in het midden te kunnen zetten.

margin: 15px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt dat automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 15px auto 0 auto in de volgorde boven - rechts - onder - links.

De marge aan de bovenkant geeft een kleine afstand tot de bovenkant van het venster van de browser.

Links en rechts auto wat hier betekent: evenveel. De marge links en rechts is dus even groot, zodat de div altijd horizontaal in het midden staat, ongeacht de grootte van het venster van de browser.

Deze manier van horizontaal centreren van een blok-element werkt alleen als het te centreren element een breedte heeft.

padding: 8px;

Aan alle kanten kleine afstand tussen buitenkant en inhoud van de div.

De div is 744 px breed. De hoogte geef ik niet op, die wordt automatisch groot genoeg om de inhoud erin te kunnen zetten.

De inhoud van de div, hier alleen tekst, staat gewoon tot aan de rand van de div. Maar de ronde hoeken worden van de div afgetrokken. Daardoor valt in de hoeken de tekst buiten de div.

Als ik geen padding gebruik, komt de tekst daardoor in de hoeken buiten de zwarte achtergrond van de div te staan, zoals op de afbeeldingen hieronder is te zien.

Ronde hoeken zonder padding
Zonder padding.

De padding zorgt voor wat afstand tussen de buitenkant van de div en de tekst, waardoor deze wel volledig boven de zwarte achtergrond komt te staan.

border-radius: 20px;

Hiermee wordt de grootte van de hoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 20 px en wordt de ronding dus zuiver cirkelvormig.

color: white;

Witte voorgrondkleur, waardoor ook de tekst wit wordt. De achtergrond wordt zwart, en zwart op zwart leest niet voor iedereen even prettig.

background: black;

Zwarte achtergrond, zodat de ronde hoeken goed zijn te zien.

#hoeken-2

Het element met id="hoeken-2". Dit is de div met het tweede voorbeeld.

Border met vier gelijke ronde hoeken

width: 710px;

De breedte is alleen maar om de div met de methode gelijk hieronder horizontaal in het midden te kunnen zetten.

margin: 15px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt dat automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 15px auto 0 auto in de volgorde boven - rechts - onder - links.

De marge aan de bovenkant geeft een kleine afstand tot div die hierboven staat.

Links en rechts auto wat hier betekent: evenveel. De marge links en rechts is dus even groot, zodat de div altijd horizontaal in het midden staat, ongeacht de grootte van het venster van de browser.

Deze manier van horizontaal centreren van een blok-element werkt alleen als het te centreren element een breedte heeft.

border: 10px solid black;

Zwarte rand aan alle kanten met een breedte van 10 px.

padding: 15px;

De reden van deze padding staat bij padding: 8px; Omdat de border-radius hier groter is, moet ook de padding groter zijn. De juiste maat vind je door gewoon even uit te proberen.

border-radius: 50px;

Hiermee wordt de grootte van de hoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 50 px en wordt de ronding dus zuiver cirkelvormig.

color: black;

Tekstkleur zwart.

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: white;

Witte achtergrondkleur.

#hoeken-3

Het element met id="hoeken-3". Dit is de div met het derde voorbeeld.

Vier ongelijke ronde hoeken
Vier ongelijke ronde hoeken, zoals weergegeven in échte browsers.

Vier ongelijke ronde hoeken
Vier ongelijke ronde hoeken, zoals weergegeven in Internet Explorer 7 en 8. Meer valt er niet van te bakken...

Omdat Internet Explorer 7 en 8 alleen maar vier dezelfde hoeken kunnen maken, zijn in deze twee browsers alle hoeken gewoon hetzelfde. Internet Explorer 7 en 8 lezen alleen border-radius en negeren de css voor de vier aparte hoeken.

width: 724px;

De breedte is alleen maar om de div met de methode gelijk hieronder horizontaal in het midden te kunnen zetten.

margin: 15px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt dat automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 15px auto 0 auto in de volgorde boven - rechts - onder - links.

De marge aan de bovenkant geeft een kleine afstand tot div die hierboven staat.

Links en rechts auto wat hier betekent: evenveel. De marge links en rechts is dus even groot, zodat de div altijd horizontaal in het midden staat, ongeacht de grootte van het venster van de browser.

Deze manier van horizontaal centreren van een blok-element werkt alleen als het te centreren element een breedte heeft.

padding: 10px 10px 50px;

Omdat voor links geen padding is opgegeven, krijgt links automatisch dezelfde padding als rechts. Hier staat dus eigenlijk 10px 10px 50px 10px in de volgorde boven - rechts - onder - links.

De reden van deze padding staat bij padding: 8px; Omdat de border-radius hier groter is, moet ook de padding groter zijn. Bovendien is hier een padding aan meerdere kanten nodig. De juiste maat vind je door gewoon even uit te proberen.

border-radius: 20px;

Dit is alleen nodig voor Internet Explorer 7 en 8. Bij dit voorbeeld geef ik elke hoek een andere ronding. Internet Explorer 7 en 8 kunnen dat niet, die kunnen alleen alle hoeken even groot maken. border-radius wordt door Internet Explorer 7 en 8 gelezen, de hieronder staande css voor aparte hoeken kennen Internet Explorer 7 en 8 niet, dus die wordt genegeerd.

Ik zet border-radius voor de css vóór de aparte hoeken. De css voor de aparte hoeken overrulet dan de border-radius, omdat deze erna komt. En normaal genomen 'wint' latere css van eerdere.

border-top-left-radius: 50px 20px;

Hiermee wordt de grootte van de linkerbovenhoek opgegeven. Het eerste getal geeft de grootte van de horizontale straal (de halve diameter) aan. Het tweede getal geeft de grootte van de verticale straal aan. Omdat deze getallen niet hetzelfde zijn, wordt de hoek ellipsvormig: de breedte wordt groter dan de hoogte van de hoek.

border-top-right-radius: 20px;

Hiermee wordt de grootte van de rechterbovenhoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 20 px en wordt de ronding dus zuiver cirkelvormig.

border-bottom-right-radius: 300px 80px;

Hiermee wordt de grootte van de rechteronderhoek opgegeven. Het eerste getal geeft de grootte van de horizontale straal (de halve diameter) aan. Het tweede getal geeft de grootte van de verticale straal aan. Omdat deze getallen niet hetzelfde zijn, wordt de hoek ellipsvormig: de breedte wordt groter dan de hoogte van de hoek.

border-bottom-left-radius: 300px 25px;

Hiermee wordt de grootte van de linkeronderhoek opgegeven. Het eerste getal geeft de grootte van de horizontale straal (de halve diameter) aan. Het tweede getal geeft de grootte van de verticale straal aan. Omdat deze getallen niet hetzelfde zijn, wordt de hoek ellipsvormig: de breedte wordt groter dan de hoogte van de hoek.

color: white;

Witte voorgrondkleur, waardoor ook de tekst wit wordt.

background: black;

Zwarte achtergrond.

#hoeken-4

Het element met id="hoeken-4". Dit is de div met het vierde voorbeeld.

Driekleurige border met ronde hoeken

width: 748px;

De breedte is alleen maar om de div met de methode gelijk hieronder horizontaal in het midden te kunnen zetten.

margin: 15px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt dat automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 15px auto 0 auto in de volgorde boven - rechts - onder - links.

De marge aan de bovenkant geeft een kleine afstand tot div die hierboven staat.

Links en rechts auto wat hier betekent: evenveel. De marge links en rechts is dus even groot, zodat de div altijd horizontaal in het midden staat, ongeacht de grootte van het venster van de browser.

Deze manier van horizontaal centreren van een blok-element werkt alleen als het te centreren element een breedte heeft.

border: 6px solid red;

Rode border van 6 px breed aan alle kanten.

border-radius: 50px;

Hiermee wordt de grootte van de hoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 50 px en wordt de ronding dus zuiver cirkelvormig.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: white;

Witte achtergrond.

#hoeken-4-m

Het element met id="hoeken-4-m". Dit is een div die binnen div#hoeken-4 staat en zorgt voor de witte rand, die tussen de blauwe en rode rand staat.

In principe zou het ook zonder deze div kunnen, omdat de achtergrond van div#hoeken-4 ook al wit is. Maar binnen deze div komt nog een derde div te staan, die voor de rode rand zorgt. Zonder deze middelste div wordt het nogal lastig die middelste div precies goed op z'n plaats te krijgen. Althans: dat gaat nog wel, maar om 'm op z'n plaats te houden bij andere lettergroottes en zoomen is nogal lastig. Dit is gewoon de simpelste oplossing.

width: 736px;

Deze div staat binnen div#hoeken-4, die zelf 748 px breed is. Bij deze div komt nog een border links en rechts van 6 px. De breedte wordt dus 6 + 736 + 6 = 748 px, precies even breed als de buitenste div. Waardoor deze div de buitenste div volledig vult en dus precies in het midden komt te staan. Waardoor de witte rand weer overal netjes parallel loopt aan de buitenste rode rand.

border: 6px solid white;

Witte rand. Je zou ook padding kunnen gebruiken, want de buitenste div heeft een witte achtergrond, alleen zet Internet Explorer 7 dan om duisteren redenen de divs (en dus de rood-wit-blauwe rand) niet goed neer.

border-radius: 50px;

Hiermee wordt de grootte van de hoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 50 px en wordt de ronding dus zuiver cirkelvormig.

#hoeken-4-bi

Het element met id="hoeken-4-bi". Dit is de binnenste div van het vierde voorbeeld. Deze div zorgt voor de blauwe rand.

width: 694px;

Deze div staat binnen div#hoeken-4-m, die zelf 736 px breed is. Bij deze div komen nog een border links en rechts van 6 px en een padding links en rechts van 15 px. De breedte wordt dus 6 + 15 + 694 + 15 + 6 = 736 px, precies even breed als div#hoeken-4-m. Waardoor deze div de middelste div volledig vult en dus precies in het midden komt te staan. Waardoor de rode rand weer overal netjes parallel loopt aan de middelste witte rand. Alleen aan de hoeken is een kleine correctie nodig, wat ik iets verderop doe bij de border-radius.

border: 6px solid blue;

Rode rand van 6 px breed aan alle kanten.

border-radius: 40px;

Hiermee wordt de grootte van de hoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 40 px en wordt de ronding dus zuiver cirkelvormig.

Bij de buitenste en middelste div is hier 50 px ingevuld. Als ik dat bij deze binnenste div ook invul, lopen de hoeken en dus de randen niet parallel aan elkaar, zoals hieronder is te zien:

Met correctie voor binnenste hoek
Met correctie voor binnenste hoek.

padding: 15px;

De reden van deze padding staat bij padding: 8px; De grootte wijkt af, dat is 'n kwestie van uitproberen.

#hoeken-5

Het element met id="hoeken-5". Dit is de div met het vijfde voorbeeld.

Vierkleurige border met ronde hoeken
Vierkleurige border met ronde hoeken, zoals weergegeven in échte browsers.

Vierkleurige border met ronde hoeken
Vierkleurige border met ronde hoeken, zoals weergegeven in Internet Explorer 7 en 8. Aan deze aanval van acute kleurenblindheid is niets te doen.

Deze border heeft vier kleuren, eentje aan elke kant. Internet Explorer 7 en 8 kunnen alleen één kleur weergeven: de eerste.

width: 710px;

De breedte is alleen maar om de div met de methode gelijk hieronder horizontaal in het midden te kunnen zetten.

margin: 15px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt dat automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 15px auto 0 auto in de volgorde boven - rechts - onder - links.

De marge aan de bovenkant geeft een kleine afstand tot div die hierboven staat.

Links en rechts auto wat hier betekent: evenveel. De marge links en rechts is dus even groot, zodat de div altijd horizontaal in het midden staat, ongeacht de grootte van het venster van de browser.

Deze manier van horizontaal centreren van een blok-element werkt alleen als het te centreren element een breedte heeft.

border: 10px solid;

Aan alle kanten een border van 10 px dik. De kleuren geef ik later op. Dit is een stuk korter dan het gebruik van border-top: blue solid 10px;, en dan nog drie keer voor de andere kanten.

border-color: blue red green black;

De kleuren van de border in de volgorde boven - rechts - onder - links. De breedte en stijl heb ik hierboven al opgegeven.

padding: 15px;

De reden van deze padding staat bij padding: 8px; De juiste maat vind je door gewoon even uit te proberen.

border-radius: 50px;

Hiermee wordt de grootte van de hoek opgegeven. Het getal geeft de grootte van de horizontale straal (de halve diameter) aan. Een eventueel tweede getal geeft de grootte van de verticale straal aan. Omdat dit hier ontbreekt, wordt dit ook 50 px en wordt de ronding dus zuiver cirkelvormig.

color: black;

Tekstkleur zwart.

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: url(091-files/beige.jpg) white;

Achtergrondplaatje. Dit is een gewoon vierkant plaatje, maar border-radius rondt ook keurig plaatjes af.

De kleur white geef ik op voor het geval de afbeelding niet wordt geladen. Dan is de achtergrond in ieder geval gewoon wit.

Speciaal voor Internet Explorer 7 en 8

<!--[if lt IE 9]> <style> #hoeken-1, #hoeken-2, #hoeken-3, #hoeken-4, #hoeken-4-m, #hoeken-4-bi, #hoeken-5 {behavior: url(091-files/border-radius.htc); font-size: 18px;} #hoeken-4-bi {background: white;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor alle versies van Internet Explorer vóór versie 9, maar je kunt het ook voor andere versies aangeven. (lt staat voor less than, minder dan.)

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if lt IE 9]> <link rel="stylesheet" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 7 en 8 in. De css voor Internet Explorer 7 en 8 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if lt IE 9]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

Ik geef een versie aan voor Internet Explorer, omdat Microsoft er een hobby van heeft gemaakt de verschillende versies van Internet Explorer incompatibel met elkaar te maken. (Bij geen enkele andere browser is dit een probleem.) Het zou best kunnen zijn, dat Internet Explorer 9 doldraait op css voor een eerdere versie van dezelfde browser. Bovendien ondersteunt Internet Explorer 9 border-radius, dus dan is de speciale css helemaal niet meer nodig.

Ik test niet meer op eerdere versies dan Internet Explorer 7, maar border-radius.htc zou ook werken op eerdere versies. Daarom kies ik in dit geval voor if lt IE 9 (als minder dan Internet Explorer 9), zodat ook Internet Explorer 6 dit gebruikt. Hoewel ik het niet zelf heb getest, zie ik ook geen reden om Internet Explorer 6 echt uit te sluiten. Maar normaal genomen geef ik altijd de precieze versienummers aan, omdat je anders grote problemen kunt krijgen met nieuwere versies.

#hoeken-1, #hoeken-2, #hoeken-3, #hoeken-4, #hoeken-4-m, #hoeken-4-bi, #hoeken-5

De elementen met id="hoeken-1", id="hoeken-2", enz. Dit zijn alle elementen, in dit voorbeeld alleen divs, die ronde hoeken hebben.

behavior: url(091-files/border-radius.htc);

Internet Explorer 7 en 8 kennen border-radius niet. Door gebruik te maken van een zogenaamde behavior, kunnen we deze fossielen zover krijgen dat ze het wel herkennen. Een behavior kan worden gebruikt om bepaalde code als het ware te importeren binnen een pagina. Dat is hier het bestand met de naam border-radius.htc.

Hoewel het bestand wordt aangeroepen vanuit de css, moet een pad worden opgegeven ten opzichte van het html-bestand, waarin het wordt gebruikt. Dit is dus anders dan bij bijvoorbeeld een achtergrond-afbeelding, waar het pad moet worden opgegeven ten opzichte van het css-bestand. Waarom Microsoft dit zo afwijkend en verwarrend heeft geïmplementeerd, weet ik ook niet.

In border-radius.htc staat JavaScript. Deze JavaScript stuurt weer VML (Vector Markup Language) aan, een taal die alleen werkt in Internet Explorer. Alle andere browsers gebruiken voor soortgelijke doeleinden de standaardtaal SVG (Scalable Vector Graphics). (Internet Explorer 9 maakt ook eindelijk een allereerste begin met de ondersteuning van SVG).

Met behulp van VML worden de ronde hoeken weergegeven. Een uiterst omslachtige methode. En dat zie je ook: in eerste instantie worden de ronde hoeken gewoon rechthoekig op het scherm gezet. Pas na het laden en verwerken van border-radius.htc worden de hoeken alsnog afgerond.

font-size: 18px;

Normaal genomen geef ik een lettergrootte op in em, omdat gebruikers van Internet Explorer anders de lettergrootte niet kunnen veranderen.

Maar als je de lettergrootte verandert in combinatie met het gebruik van border-radius, gaat het gelijk grandioos mis in Internet Explorer 7 en 8. Daarom geef ik in dit geval de lettergrootte op in px, zodat hij in Internet Explorer niet kan worden veranderd.

#hoeken-4-bi

Het element met id="hoeken-4-bi". Dit is de binnenste div uit het vierde voorbeeld, die zorgt voor de blauwe rand.

background: white;

Om een of andere duistere reden veranderen Internet Explorer 7 en 8 de achtergrondkleur spontaan in zwart. Ik neem aan dat dit 'n bijwerking is van het gebruik van VML. Hoe dan ook: dit lost het op.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style> #hoeken-4, #hoeken-4-m, #hoeken-4-bi {position: relative;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 7 en 8.

#hoeken-4, #hoeken-4-m, #hoeken-4-bi

De elementen met id="hoeken-4", id="hoeken-4-m" en id="hoeken-4-bi". Dit zijn de drie divs uit het vierde voorbeeld met de rood-wit-blauwe rand.

position: relative;

Internet Explorer 7 zet de middelste en binnenste div in de linkerbovenhoek van de buitenste div. Hierdoor komen de rode, witten blauwe rand niet naast elkaar, maar over elkaar heen te staan. Om wat voor reden dan ook zorgt deze toevoeging ervoor dat de divs goed komen te staan.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Omdat zonder css, zoals veel spraakbrowsers en dergelijke de pagina weergeven, alleen de afgeronde hoeken en/of borders verdwijnen, levert border-radius geen problemen op wat betreft toegankelijkheid.

Getest in

Laatst gecontroleerd op 29 april 2012.

Dit voorbeeld is getest op de volgende systemen:

Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In resoluties groter dan 800x600 is ook in- en uitzoomen en – voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Er is getest met behulp van muis en toetsenbord.

Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan bij Bekende problemen. Dat stukje is er niet voor niets. Hierboven is alleen aangegeven, waarin is getest. Dat wil niet zeggen dat het werkt, en al helemaal niet dat het foutloos werkt. Lees Bekende problemen dus!

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest bijvoorbeeld ’n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

Wijzigingen

:

Nieuw opgenomen.

23 december 2010:

Tot mijn niet geringe verbazing blijkt Safari op OS X het voorvoegsel -webkit- nog nodig te hebben, terwijl het op Windows border-radius zonder voorvoegsel al herkend.

Op alle plaatsen waar dat nodig was, zijn hiervoor wijzigingen aangebracht.

18 mei 2011;

29 april 2012:

Bekende problemen

Alle browsers, behalve Internet Explorer 7 en 8

Als de lettergrootte wordt verkleind of vergroot, kunnen één of meer letters in de hoeken buiten de achtergrond komen te staan. Dit zou je kunnen voorkomen door als eenheid voor de padding geen px, maar em te nemen. Maar dan moet je die em zo groot nemen, dat het niet mooi meer is, dus dit is geen goede oplossing.

Het probleem doet zich trouwens alleen in de rechterbenedenhoek van het derde voorbeeld voor, dus als je de hoeken niet al te lang maakt, speelt het niet.

Ook bij zoomen speelt dit probleem, maar veel minder. Er vallen dan hooguit kleine stukjes van 'n letter weg.

Omdat Internet Explorer 7 en 8 alleen maar gelijke hoeken kunnen maken, speelt het probleem daar niet. Bovendien kan in Internet Explorer 7 en 8 de lettergrootte niet worden veranderd, dus als het al 'n probleem zou zijn, dan alleen bij zoomen.

(Opmerking 29 april 2012: doordat de tekst binnen het derde voorbeeld is veranderd, deed dit probleem zich nu nog veel sterker voor. Daarom heb ik de padding aan de onderkant gewoon ’n stuk groter gemaakt.)

Internet Explorer 7 en 8