Corner-shape

corner-shape is een CSS-property die samenwerkt met border-radius. Zonder border-radius heeft corner-shape geen effect.

mdn documentatie

Net als bij border-radius kun je per hoek een andere waarde instellen: corner-shape: notch round notch round;

De volgorde is (van links naar rechts):

• top-left
• top-right
• bottom-right
• bottom-left

Beschikbare vormen:

• round (default)
• bevel – alsof er een hoekje is afgesneden
• scoop – een omgekeerde cirkel
• notch – een vierkant stukje eruit
• squircle (hier zie ik niet echt vershil met de default)

Je kunt ook de border-radius aanpassen om de vorm van de corner-shape te veranderen. bijvoorbeeld met:

• border-top-left-radius: 50px;
• border-top-right-radius: 48px 50%;
• border-bottom-left-radius: 16px;
• border-bottom-right-radius: 80px;
• border-radius: 16px 48px 48px 16px;
• border-radius: 25% 10%;

Pseudo-elementen

Met ::before en ::after kan je extra lagen toevoegen aan hetzelfde element. Die pseudo-elementen kunnen hun eigen corner-shape krijgen, zodat je verschillende combinaties en creatieve vormen kan maken.

Border

Als een element een border heeft, volgt de border automatisch de vorm die door corner-shape gemaakt is.

Je kan met :hover of :active states de corners een andere vorm geven.

Op deze overgang kan je ook een transitions toevoegen.

2025-09-19 18-56-07.webm

2025-09-19 19-09-13.webm

Met @keyframes kan je de corner-shape animeren.

2025-09-19 18-58-30.webm

breadcrumb menu

Dit is ook een handige manier om een breadcrumbs menu te maken. Hiervoor heb ik een ul, waarbij elk li element (behalve het laatste) een bevel krijgt.

In elk li kan je een link plaatsen. De corner-shape met bevel vormt dan een pijltje dat naar de volgende link wijst.

conclusie

Na ongeveer een uurtje te experimenteren merk ik dat corner-shape heel eenvoudig te leren is. Het is een super handig om elementen meer karakter te geven, en ik ga het zeker vaker gebruiken.

Voor nu zie ik deze toepassingen:

• Buttons een andere vorm geven, ipv mijn standaard border-radius om de randen wat ronder te maken
• Aandacht trekken naar buttons mbv een keyframe animaties
• misschien ook een loading state op de button plaatsen, nadat het geklikt wordt
• een active effect die de vorm van de button veranderd als de gebruiker erop klikt
• Breadcrumbs-menu’s mooier te maken.

codepen

link naar de codepen waar ik dit alles getest heb