Corner Radius — was ist der Abrundungsradius in mobilen Apps

Was ist corner radius?

Corner radius ist ein numerischer Wert, der den Grad der Abrundung der Ecken eines rechteckigen Elements bestimmt. Je höher der Wert, desto runder wird die Ecke. Bei 0 bleibt die Ecke rechtwinklig (90°); bei einem Wert, der der Hälfte der kürzeren Seite entspricht, wird das Element zu einem Kreis (bei einem Quadrat) oder zu einem abgerundeten Rechteck mit geraden Seiten (Kapsel).

Im mobilen Design wird corner radius verwendet für: Karten und Kacheln, Schaltflächen, Eingabefelder, modale Fenster, Bilder und Avatare, Fortschrittsanzeigen, Chips und Badges. Jeder Elementtyp hat einen empfohlenen Bereich der Abrundung basierend auf den Material Design und Human Interface Guidelines.

Laut Material Design 3 (Google, 2026) wird die Eckenabrundung in drei Stufen eingeteilt: klein (4 dp) für Schaltflächen und Eingabefelder, mittel (8–12 dp) für Karten und Blätter, groß (16–28 dp) für Dialoge und Bottom Sheets. Apple HIG (2025) empfiehlt einen einheitlichen corner radius von 10–12 pt für Systemelemente (UIButton, UITextField) und 20+ pt für modale Präsentationen.

Corner radius auf iOS: CALayer und SwiftUI

Auf iOS wird die Eckenabrundung über die cornerRadius-Eigenschaft von CALayer implementiert. In UIKit hat jedes UIView eine Ebene, deren cornerRadius gesetzt werden kann. Für komplexere Abrundungen (verschiedene Radien für verschiedene Ecken) werden maskedCorners und CACornerMask in Kombination mit UIBezierPath verwendet.

// UIKit: Abrundung über CALayer
import UIKit

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

In SwiftUI wird die Abrundung über den Modifikator cornerRadius() oder über ClipShape mit RoundedRectangle gesetzt. SwiftUI unterstützt auch individuelle Eckenabrundung über UIRectCorner in Kombination mit clipped() und overlay().

// SwiftUI: Abrundung über RoundedRectangle
import SwiftUI

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

// Individuelle Eckenabrundung
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius ist ein Abrundungsstil, den Apple seit iOS 7 verwendet. Im Gegensatz zum klassischen Radius (kreisförmig) erzeugt der kontinuierliche Radius eine glattere Abrundung durch Verwendung einer Bezier-Kurve dritter Ordnung anstelle eines Kreisbogens. SwiftUI unterstützt diesen Stil über den Parameter style: .continuous in RoundedRectangle. Apple empfiehlt continuous corner radius für alle Systemelemente, da er optisch natürlicher wirkt.

Corner radius in Android: shape und Compose

In Android wird die Eckenabrundung traditionell über XML-shape-Ressourcen im Ordner res/drawable implementiert. Shape definiert die Hintergrundform mit den Parametern cornerRadius und solid. Für verschiedene Ecken wird <corners android:bottomLeftRadius="..." /> verwendet. In Material Design 3 wurde MaterialShapeDrawable mit Themenunterstützung und dynamischen Formen hinzugefügt.

<!-- 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 wird die Abrundung über den shape-Parameter von Modifier gesetzt. Compose bietet RoundedCornerShape mit Unterstützung für verschiedene Radien für jede Ecke und Stil (CircularShape oder CutCornerShape). Compose unterstützt auch continuous corner radius über RoundedCornerShape in Kombination mit grafischem Strich.

// Jetpack Compose: Abrundung über 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 = "Card mit benutzerdefinierter Abrundung")
}

MaterialShapeDrawable im Android View System ermöglicht das dynamische Ändern des corner radius, ohne das drawable neu zu erstellen. Verwenden Sie ShapeAppearanceModel für die präzise Konfiguration: setzen Sie cornerFamily (rounded oder cut) und cornerSize für jede Ecke einzeln.

Wie wählt man den richtigen corner radius

Die Wahl des corner radius hängt von der Art des Elements, dem Verwendungskontext und der Plattform ab. Es gibt keine universelle Regel, aber Material Design und Apple HIG geben klare Empfehlungen für Standardkomponenten. Das Hauptprinzip: Die Abrundung sollte sichtbar sein, aber den Inhalt nicht beeinträchtigen.

Kontrastregel: Elemente mit unterschiedlichem corner radius in derselben Oberfläche sollten sich um mindestens 4 dp unterscheiden, damit der visuelle Unterschied erkennbar ist. Verwenden Sie nicht 3 Stufen der Abrundung auf einem Bildschirm — dies erzeugt visuelles Rauschen. Material Design 3 empfiehlt nicht mehr als zwei Stufen der Abrundung pro Bildschirm: eine für Container (Karten, Dialoge) und eine für interaktive Elemente (Schaltflächen, Felder).

Corner radius in Flutter

In Flutter wird die Eckenabrundung über die Klasse BorderRadius implementiert, die Werte von Radius.circular() oder Radius.elliptical() akzeptiert. Flutter unterstützt individuelle Abrundung über BorderRadius.only() und BorderRadius.horizontal()/vertical(). Das Widget ClipRRect schneidet das Unterelement gemäß dem angegebenen BorderRadius zu.

// Flutter: Abrundung über ClipRRect und 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('Benutzerdefinierte Eckenabrundung'),
)

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

ClipRRect in Flutter wird verwendet, wenn Sie ein Bild oder komplexes Widget entlang einer abgerundeten Grenze zuschneiden müssen. Für einfache Hintergrundcontainer reicht BoxDecoration mit borderRadius aus — dies ist leistungsfähiger, da es keine separate Zuschneideebene erstellt. Material Flutter 3.22+ unterstützt continuous corner radius über ContinuousRectangleBorder.