Corner Radius — vad är det, avrundningsradie i mobila appar

Vad är corner radius?

Corner radius — ett numeriskt värde som bestämmer graden av avrundning av hörnen på ett rektangulärt element. Ju högre värde, desto rundare blir hörnet. Vid värdet 0 förblir hörnet rakt (90°), vid ett värde lika med hälften av den kortare sidan omvandlas elementet till en cirkel (för en kvadrat) eller en avrundad rektangel med raka sidor (kapsel).

I mobildesign används corner radius för: kort och paneler, knappar, inmatningsfält, modala fönster, bilder och avatarer, förloppsindikatorer, chips och märken. Varje elementtyp har ett rekommenderat intervall för avrundning baserat på riktlinjerna från Material Design och Human Interface Guidelines.

Enligt Material Design 3 (Google, 2026) klassificeras hörnrundning i tre nivåer: small (4 dp) för knappar och inmatningsfält, medium (8–12 dp) för kort och ark, large (16–28 dp) för dialogrutor och bottom sheets. HIG Apple (2025) rekommenderar en enhetlig corner radius på 10–12 pt för systemelement (UIButton, UITextField) och 20+ pt för modala presentationer.

Corner radius på iOS: CALayer och SwiftUI

På iOS realiseras hörnrundning via egenskapen cornerRadius hos CALayer. I UIKit har varje UIView ett lager där cornerRadius kan ställas in. För mer komplexa avrundningar (olika radier för olika hörn) används maskedCorners och CACornerMask i kombination med UIBezierPath.

// UIKit: avrundning via CALayer
import UIKit

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

I SwiftUI ställs avrundning in via modifieraren cornerRadius() eller via ClipShape med RoundedRectangle. SwiftUI stöder även individuell hörnrundning via UIRectCorner i kombination med clipped() och overlay().

// SwiftUI: avrundning via RoundedRectangle
import SwiftUI

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

// Individuell hörnrundning
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — avrundningsstilen som Apple använder i iOS sedan lanseringen av iOS 7. Till skillnad från klassisk radie (circular) skapar continuous radius en mjukare avrundning genom att använda en Bezierkurva av tredje ordningen istället för en cirkelbåge. SwiftUI stöder denna stil via parametern style: .continuous i RoundedRectangle. Apple rekommenderar continuous corner radius för alla systemelement som visuellt mer naturlig.

Corner radius i Android: shape och Compose

I Android realiseras hörnrundning traditionellt via XML-shape-resurser i mappen res/drawable. Shape definierar bakgrundsformen med parametrarna cornerRadius och solid. För olika hörn används <, bottom, top och <right. I Material Design 3 lades MaterialShapeDrawable till med stöd för teman och dynamiska former.

<!-- 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>

I Jetpack Compose ställs avrundning in via parametern shape i Modifier. Compose tillhandahåller RoundedCornerShape med stöd för olika radier för varje hörn och stil (CircularShape eller CutCornerShape). Compose stöder även continuous corner radius via RoundedCornerShape i kombination med grafisk kontur.

// Jetpack Compose: avrundning 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 = "Kort med anpassad avrundning")
}

MaterialShapeDrawable i Android View System gör det möjligt att dynamiskt ändra corner radius utan att återskapa drawable. Använd ShapeAppearanceModel för exakt konfiguration: ställ in cornerFamily (rounded eller cut) och cornerSize för varje hörn separat.

Hur man väljer rätt corner radius

Valet av corner radius beror på elementtypen, användningssammanhanget och plattformen. Det finns ingen universell regel, men Material Design och HIG Apple ger tydliga rekommendationer för standardkomponenter. Grundprincipen: avrundningen ska vara märkbar men inte störa innehållet.

Kontrastregel: element med olika corner radius i ett gränssnitt bör skilja sig med minst 4 dp för att den visuella skillnaden ska vara märkbar. Använd inte 3 nivåer av avrundning på en skärm — det skapar visuellt brus. Material Design 3 rekommenderar att använda högst två nivåer av avrundning per skärm: en för behållare (kort, dialogrutor) och en för interaktiva element (knappar, fält).

Corner radius i Flutter

I Flutter realiseras hörnrundning via klassen BorderRadius, som accepterar värdena Radius.circular() eller Radius.elliptical(). Flutter stöder individuell avrundning via BorderRadius.only() och BorderRadius.horizontal()/vertical(). Widgeten ClipRRect beskär underordnat element enligt angivet BorderRadius.

// Flutter: avrundning via ClipRRect och 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('Anpassad hörnrundning'),
)

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

ClipRRect i Flutter används när en bild eller komplex widget behöver beskäras längs en avrundad kant. För enkla bakgrundsbehållare räcker BoxDecoration med borderRadius — det är mer prestandaeffektivt eftersom det inte skapar ett separat beskärningslager. Material Flutter 3.22+ stöder continuous corner radius via ContinuousRectangleBorder.