In de webtip van deze week gaan we eens kijken hoe we op een simpele manier ronde hoeken kunnen maken voor je website, die ook nog eens cross browser compatibel zijn! Dit gaan we doen met het eerder besproken CSS3. Het uiteindelijke resultaat vind je in onze demo.

Ronde hoeken maken is altijd al een lastig klusje geweest en inmiddels zijn er velen manieren om dit te doen. Gebruik ik plaatjes? Maak ik gebruik van javascript? Of doen we het simpel met CSS? Wij gaan voor de laatste manier. Met de komst van CSS3 wordt het maken van ronde hoeken namelijk een fluitje van een cent. Helaas werken de nieuwe functies van CSS3 nog niet binnen alle huidige browsers, maar daar hebben we een handige oplossing voor.

Laten we eerst maar eens kijken hoe we ronde hoeken kunnen maken met CSS3!

Ronde hoeken met CSS3

Elke browser heeft zijn eigen CSS functie voor het maken van ronde hoeken. Bekijk het volgende voorbeeldje maar eens, dat werkt onder Firefox, Chrome, Safari, en alle versies van Opera sinds versie 10.5.

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}

Bovenstaande code zal (bijvoorbeeld) een div met de class 'rounded-corners' ronde hoeken geven met een 'radius' van 10 pixels. Hoe groter dit getal dus is, hoe groter je ronde hoeken worden.

En zo simpel is het! Je zult echter merken dat dit niet op gaat voor Internet Explorer, maar hier is gelukkig een oplossing voor.

Ronde hoeken in Internet Explorer

Door het laden van een speciaal bestandje in onze stylesheet, krijgen we ook ronde hoeken in Internet Explorer. Download hiervoor border-radius.htc en plaats dit bestandje in dezelfde map als waar je CSS bestand zich bevindt. Vervolgens voeg je een extra regel toe, waardoor de rounded-corner benaming er als volgt uit ziet:

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
  behavior: url(border-radius.htc); /* IE FIX */
}

Het beste is om de laatste regel in een aparte stylesheet te zetten, bijvoorbeeld ie.css, die alleen geladen wordt wanneer de gebruiker met Internet Explorer surft. ie.css kan er dan als volgt uitzien:

.rounded-corners {
  behavior: url(border-radius.htc); /* IE FIX */
}

Op deze manier bespaar je bandbreedte én laadtijd voor de andere browsers. Hoe je dit verder moet implenteren in je eigen website kun je lezen in de webtip van 3 weken geleden.

Spelen met ronde hoeken

Uiteraard kun je ook de afzonderlijke hoeken apart een radius of helemaal geen ronding meegeven. Dit kun je doen door de afzonderlijke hoeken te benoemen:

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

• -webkit-border-top-left-radius
• -webkit-border-top-right-radius
• -webkit-border-bottom-left-radius
• -webkit-border-bottom-right-radius

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

Achter elke 'functie' kunnen 2 waardes worden gegeven. De eerste waarde is de grootte van de breedte-radius, de tweede waarde van de hoogte-radius. Geef je maar één waarde op, dan krijg je gelijke ronde hoeken. Wellicht klinkt dit wat ingewikkeld, kijk daarom maar eens naar onze demo.

Het gebruik van de afzonderlijke CSS functies lijkt echter niet te werken in combinatie met de border-radius.htc oplossing voor Internet Explorer.

Conclusie en demo

Ronde hoeken maken wordt met de komst van CSS3 nog simpeler! Helaas werken nog niet alle huidige browsers met ondersteuning voor CSS3. Wil je dus overal gelijke ronde hoeken hebben, dan kun je voorlopig prima vooruit met de bovenstaande oplossing. Wil je de afzonderlijke hoeken rondingen geven, dan zul je voor Internet Explorer helaas toch gebruik moeten maken van plaatjes of een javascript-scriptje.

De demo vind je hier.