Corner Radius — wat is het, afrondingsradius in mobiele apps

Wat is corner radius?

Corner radius — een numerieke waarde die de mate van afronding van de hoeken van een rechthoekig element bepaalt. Hoe hoger de waarde, hoe ronder de hoek wordt. Bij waarde 0 blijft de hoek recht (90°), bij een waarde gelijk aan de helft van de kortste zijde verandert het element in een cirkel (voor een vierkant) of een afgeronde rechthoek met rechte zijden (capsule).

In mobiel ontwerp wordt corner radius gebruikt voor: kaarten en tegels, knoppen, invoervelden, modale vensters, afbeeldingen en avatar's, voortgangsindicatoren, chips en badges. Elk type element heeft een aanbevolen bereik voor afronding, gebaseerd op de richtlijnen van Material Design en Human Interface Guidelines.

Volgens Material Design 3 (Google, 2026) wordt hoekafronding ingedeeld in drie niveaus: small (4 dp) voor knoppen en invoervelden, medium (8–12 dp) voor kaarten en bladen, large (16–28 dp) voor dialoogvensters en bottom sheets. HIG Apple (2025) beveelt een uniforme corner radius van 10–12 pt aan voor systeemelementen (UIButton, UITextField) en 20+ pt voor modale presentaties.

Corner radius op iOS: CALayer en SwiftUI

Op iOS wordt hoekafronding gerealiseerd via de eigenschap cornerRadius van CALayer. In UIKit heeft elke UIView een laag waarvan cornerRadius kan worden ingesteld. Voor complexere afrondingen (verschillende stralen voor verschillende hoeken) worden maskedCorners en CACornerMask in combinatie met UIBezierPath gebruikt.

// UIKit: afronding via CALayer
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12
cardView.layer.maskedCorners = [
    .layerMinXMinYCorner,
    .layerMaxXMinYCorner
]

In SwiftUI wordt afronding ingesteld via de modifier cornerRadius() of via ClipShape met RoundedRectangle. SwiftUI ondersteunt ook individuele hoekafronding via UIRectCorner in combinatie met clipped() en overlay().

// SwiftUI: afronding via RoundedRectangle
import SwiftUI

VStack {
    Text("Hoekradius 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Individuele hoekafronding
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — de afrondingsstijl die Apple in iOS gebruikt sinds de release van iOS 7. In tegenstelling tot de klassieke radius (circular), creëert continuous radius een vloeiendere afronding door gebruik te maken van een Bezier-curve van de derde orde in plaats van een cirkelboog. SwiftUI ondersteunt deze stijl via de parameter style: .continuous in RoundedRectangle. Apple beveelt continuous corner radius aan voor alle systeemelementen als visueel natuurlijker.

Corner radius in Android: shape en Compose

In Android wordt hoekafronding traditioneel gerealiseerd via XML-shape-bronnen in de map res/drawable. Shape definieert de vorm van de achtergrond met parameters cornerRadius en solid. Voor verschillende hoeken worden <, bottom, top en <right gebruikt. In Material Design 3 is MaterialShapeDrawable toegevoegd met ondersteuning voor thema's en dynamische vormen.

<!-- res/drawable/bg_card.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="12dp" />
</shape>

In Jetpack Compose wordt afronding ingesteld via de parameter shape bij Modifier. Compose biedt RoundedCornerShape met ondersteuning voor verschillende stralen voor elke hoek en stijl (CircularShape of CutCornerShape). Compose ondersteunt ook continuous corner radius via RoundedCornerShape in combinatie met grafische contour.

// Jetpack Compose: afronding via RoundedCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    shape = RoundedCornerShape(
        topStart = 16.dp,
        topEnd = 16.dp,
        bottomStart = 4.dp,
        bottomEnd = 4.dp
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text(text = "Kaart met aangepaste afronding")
}

MaterialShapeDrawable in Android View System maakt het mogelijk om corner radius dynamisch te wijzigen zonder de drawable opnieuw te maken. Gebruik ShapeAppearanceModel voor nauwkeurige configuratie: stel cornerFamily (rounded of cut) en cornerSize in voor elke hoek afzonderlijk.

Hoe kies je de juiste corner radius

De keuze van corner radius hangt af van het type element, de gebruikscontext en het platform. Er is geen universele regel, maar Material Design en HIG Apple geven duidelijke aanbevelingen voor standaardcomponenten. Het basisprincipe: afronding moet merkbaar zijn, maar de inhoud niet hinderen.

Contrastregel: elementen met verschillende corner radius in één interface moeten minimaal 4 dp verschillen om het visuele verschil merkbaar te maken. Gebruik geen 3 niveaus van afronding op één scherm — dit creëert visuele ruis. Material Design 3 beveelt aan om niet meer dan twee niveaus van afronding per scherm te gebruiken: één voor containers (kaarten, dialoogvensters) en één voor interactieve elementen (knoppen, velden).

Corner radius in Flutter

In Flutter wordt hoekafronding gerealiseerd via de klasse BorderRadius, die waarden Radius.circular() of Radius.elliptical() accepteert. Flutter ondersteunt individuele afronding via BorderRadius.only() en BorderRadius.horizontal()/vertical(). De widget ClipRRect snijdt het onderliggende element bij volgens de opgegeven BorderRadius.

// Flutter: afronding via ClipRRect en Container
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
            bottomLeft: Radius.circular(4.0),
            bottomRight: Radius.circular(4.0),
        ),
    ),
    child: Text('Aangepaste hoekafronding'),
)

// ClipRRect met Image
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

ClipRRect in Flutter wordt gebruikt wanneer een afbeelding of complexe widget moet worden bijgesneden langs een afgeronde rand. Voor eenvoudige achtergrondcontainers is BoxDecoration met borderRadius voldoende — dit is efficiënter omdat het geen aparte bijsnijdlaag creëert. Material Flutter 3.22+ ondersteunt continuous corner radius via ContinuousRectangleBorder.