Afgeronde hoeken maken van kader met CSS

Je kunt elk element “afgeronde hoeken” geven door via CSS een border-radius toe te passen. Je merkt het alleen als er een kleurverandering bij betrokken is. Bijvoorbeeld als het element een andere achtergrondkleur of rand heeft dan het element waar het boven staat.

.element {border-radius: 10px;}

Eigenschappen van border-radius

border-radius is wat we noemen een “stenografische” eigenschap. Dat betekent dat het de volgende individuele eigenschappen in een enkele declaratie instelt:

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

Eigenschappen

Deze worden “fysieke” eigenschappen genoemd, omdat ze de straal bepalen aan de hand van de fysieke locatie van de hoek (bijv. linksboven). Maar border-radius maakt deel uit van de specificatie Logische eigenschappen en Waarden, wat betekent dat het logische equivalenten heeft van de fysieke eigenschappen.

/* Enkele waarde */
/* Stelt alle vier de hoeken in */
border-radius: 10px;

/* Twee waarden /*
/* linksboven en rechtsonder rechtsboven en linksonder */
border-radius: 25% 0;

/* Drie waarden */
/* linksboven rechtsboven/ linksonder rechtsonder */
border-radius: 1rem 1.5rem 1.25rem;

/* Vier waarden */
/* linksboven rechtsonder rechtsonder linksonder */
border-radius: 8px 10px 12px 14px;

/* Globale waarden */
border-radius: inherit;
grensradius: initial;
border-radius: revert;
border-radius: revert;
border-radius: unset;

Geavanceerde afronding maken met border-radius CSS

Oefenen met afronding van border-radius

See the Pen All the border-radius’ by Chris Coyier (@chriscoyier) on CodePen.

Geavanceerde vreemde afgeronde hoeken maken

Geavanceerde afgeronde hoeken maken, bijvoorbeeld hoeken of andere rondingen kun je doen met deze tool:

https://9elements.github.io/fancy-border-radius

Bijvoorbeeld:

.element {border-radius: 90% 10% 89% 11% / 9% 91% 9% 91% ;}

Meer handleidingen over afgeronde hoeken in CSS

Meer handleidingen over afgeronde afbeeldingen, kaders, CSS en border-radius instellen: