Het is weer zondag en dat betekent dat we weer een verse webtip hebben. Op je website wil je, om welke reden dan ook, soms een cirkel plaatsen, bijvoorbeeld met bepaalde informatie daarin. Vandaag gaan we kijken hoe we met de rounded-corners functie van CSS3 dit voor elkaar kunnen krijgen. Het voordeel hier van is dat je geen plaatjes meer hoeft te maken waar de cirkels in staan en dat bespaart weer laadtijd en bandbreedte!

Hoe werkt het?

Eigenlijk is het heel simpel. We hebben enkele webtips terug al laten zien hoe je ronde hoeken kunt maken met CSS3. Vandaag passen we dezelfde methode toe om cirkels te maken. Cirkels zijn dan eigenlijk ook vierkanten met ronde hoeken die doorlopen tot het midden van deze vierkanten. We maken dus de radius van de ronde hoeken de helft van de grootte van het 'vierkant'. Laten we maar eens kijken naar dit voorbeeld:

.circle {
  background: #da3333;  
  height: 100px;
  width: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

En zo simpel is het eigenlijk! Meer voorbeelden vind je op onze demo-pagina:

Demo's

Enkele voorbeelden vind je op onze demo-pagina.