Home » Ontwikkelen » CSS » Cirkel maken met CSS? Gebruik border radius

Nog niet zo heel lang geleden konden afrondingen op webpagina’s alleen met losse afbeeldingen gemaakt worden. Voor elk hoekje een apart plaatje. Het nadeel hiervan is dat het onnodig het laden van je webpagina vertraagt, het niet flexibel is, en veel tijd kost om te maken of te bewerken. Gelukkig is er nu een makkelijkere methode. Met behulp van een stukje CSS3 kan je eenvoudig van elk blok een cirkel maken.

Een volledige cirkel

In het onderstaande voorbeeld maken we een class genaamd “cirkel”.

.cirkel {
  background-color: #f56e6e;
  height: 100px;
  width: 100px;
  -moz-border-radius:50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

Met “background-color: #f56e6e;” zetten we de achtergrond van het blok. De hoogte en breedte worden met “height” en “width” ingesteld op 100 pixels. Met border-radius: 50% geven we aan dat de afronding in elke van de vier hoeken precies de helft van de grootte van het blokje moet zijn.

<div class='cirkel'>&nbsp;</div>

Voorbeeld

Een halve cirkel

Om een halve cirkel te maken moeten we de CSS wat aanpassen. We maken een nieuwe classe aan genaamd “cirkel-half”.

.cirkel-half {
  background-color: #f56e6e;
  height: 100px;
  width: 50px;
  -moz-border-radius: 0 50px 50px 0;
  -webkit-border-radius: 0 50px 50px 0;
  border-radius: 0 50px 50px 0;
}

De breedte (width) delen we door twee. Bij border-radius staan nu vier afmetingen, één voor elke hoek, met de klok mee. Je begint linksboven, deze afronding moet 0 pixels breed zijn. Rechtsboven en onder is de grootte van de afronding 50 pixels en linksonder weer 0 pixels.

<div class='cirkel-half'>&nbsp;</div>

Voorbeeld

De auteur: Emiel Kwakkel

Emiel Kwakkel is afgestudeerd op het gebied van communicatie en digitale vormgeving en als web designer werkzaam bij een fitness franchise organisatie. Ben je geïnteresseerd in web design en user interface design / testing volg dan naast deze blog ook zijn Twitter. Bekijk alle berichten van Emiel Kwakkel →