CSS - Ronde hoeken en cirkels


Sinds CSS 3 bestaat er de mogelijkheid om met behulp van CSS om elementen te voorzien van ronde hoeken. Zodoende hoef je dus niet allerlei manieren te verzinnen om elementen van ronde hoeken te voorzien zoals bijvoorbeeld een oplossing met afbeeldingen. Het toepassen van het effect is bijzonder eenvoudig, de code wordt dan als volgt.

div.roundedcorners {
        border-radius:10px;
        border:1px solid #ccc;
}


Een voorbeeld van de code in actie zie je hieronder.

Lorem Lipsum Dolor Simet
Eventueel zijn de ronde hoeken ook specifiek in te stellen per hoek zoals hieronder.
Lorem Lipsum Dolor Simet

In dat geval wordt de code dan als volgt,

div.roundedcorners {
        border-radius:30px 0px 30px 0px;
}

Cirkels maken

Aanvullend op het bovenstaande kun je zodoende ook eenvoudig cirkels maken waarvan hieronder een voorbeeld. Dit kan bijvoorbeeld in webshops gebruikt worden om de prijs te tonen of op een website voor labels die worden gebruikt. Zorg bij het maken van een cirkel dat de breedte en de hoogte gelijk zijn en deze waardes stel je dan ook in als radius.

Lorem Lipsum Dolor Simet

.circle {
        width:250px;
        height:250px;
        border-radius:250px;
        background-color:#FF6600;
}