Corner Radius — co to jest, promień zaokrąglenia w aplikacjach mobilnych

Co to jest corner radius?

Corner radius — wartość liczbowa określająca stopień zaokrąglenia rogów prostokątnego elementu. Im wyższa wartość, tym bardziej zaokrąglony staje się róg. Przy wartości 0 róg pozostaje prosty (90°), przy wartości równej połowie krótszego boku element zamienia się w koło (dla kwadratu) lub zaokrąglony prostokąt z prostymi bokami (kapsuła).

W projektowaniu mobilnym corner radius stosuje się do: kart i kafelków, przycisków, pól wprowadzania, okien modalnych, obrazów i awatarów, wskaźników postępu, chipów i badge'ów. Każdy typ elementu ma zalecany zakres zaokrąglenia, oparty na wytycznych Material Design i Human Interface Guidelines.

Według Material Design 3 (Google, 2026), zaokrąglanie rogów klasyfikuje się na trzy poziomy: small (4 dp) dla przycisków i pól wprowadzania, medium (8–12 dp) dla kart i arkuszy, large (16–28 dp) dla okien dialogowych i bottom sheetów. HIG Apple (2025) zaleca jednolity corner radius 10–12 pt dla elementów systemowych (UIButton, UITextField) i 20+ pt dla prezentacji modalnych.

Corner radius w iOS: CALayer i SwiftUI

W iOS zaokrąglanie rogów realizuje się przez właściwość cornerRadius w CALayer. W UIKit każdy UIView ma warstwę, w której można ustawić cornerRadius. Do bardziej złożonych zaokrągleń (różne promienie dla różnych rogów) używa się maskedCorners i CACornerMask w kombinacji z UIBezierPath.

// UIKit: zaokrąglanie przez CALayer
import UIKit

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

W SwiftUI zaokrąglanie ustawia się przez modyfikator cornerRadius() lub przez ClipShape z RoundedRectangle. SwiftUI obsługuje również indywidualne zaokrąglanie rogów przez UIRectCorner w kombinacji z clipped() i overlay().

// SwiftUI: zaokrąglanie przez RoundedRectangle
import SwiftUI

VStack {
    Text("Promień narożnika 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Indywidualne zaokrąglanie rogów
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — styl zaokrąglania używany przez Apple w iOS od wersji iOS 7. W przeciwieństwie do klasycznego promienia (circular), continuous radius tworzy bardziej płynne zaokrąglenie dzięki zastosowaniu krzywej Beziera trzeciego stopnia zamiast łuku okręgu. SwiftUI obsługuje ten styl przez parametr style: .continuous w RoundedRectangle. Apple zaleca continuous corner radius dla wszystkich elementów systemowych jako wizualnie bardziej naturalny.

Corner radius w Androidzie: shape i Compose

W Androidzie zaokrąglanie rogów tradycyjnie realizuje się przez zasoby XML shape w folderze res/drawable. Shape określa kształt tła z parametrami cornerRadius i solid. Dla różnych rogów używa się <, bottom, top oraz <right. W Material Design 3 dodano MaterialShapeDrawable z obsługą motywów i dynamicznych kształtów.

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

W Jetpack Compose zaokrąglanie ustawia się przez parametr shape w Modifier. Compose udostępnia RoundedCornerShape z obsługą różnych promieni dla każdego rogu oraz stylem (CircularShape lub CutCornerShape). Compose obsługuje również continuous corner radius przez RoundedCornerShape w kombinacji z graficznym obrysem.

// Jetpack Compose: zaokrąglanie przez 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 = "Karta z niestandardowym zaokrągleniem")
}

MaterialShapeDrawable w Android View System pozwala dynamicznie zmieniać corner radius bez odtwarzania drawable. Użyj ShapeAppearanceModel do precyzyjnej konfiguracji: ustaw cornerFamily (rounded lub cut) i cornerSize dla każdego rogu osobno.

Jak wybrać właściwy corner radius

Wybór corner radius zależy od typu elementu, kontekstu użycia i platformy. Nie ma uniwersalnej reguły, ale Material Design i HIG Apple podają jasne zalecenia dla standardowych komponentów. Główna zasada: zaokrąglenie powinno być zauważalne, ale nie przeszkadzać zawartości.

Zasada kontrastu: elementy z różnym corner radius w jednym interfejsie powinny różnić się co najmniej o 4 dp, aby różnica wizualna była zauważalna. Nie używaj 3 poziomów zaokrąglenia na jednym ekranie — tworzy to szum wizualny. Material Design 3 zaleca używanie nie więcej niż dwóch poziomów zaokrąglenia na ekran: jeden dla kontenerów (karty, okna dialogowe) i jeden dla elementów interaktywnych (przyciski, pola).

Corner radius we Flutter

We Flutter zaokrąglanie rogów realizuje się przez klasę BorderRadius, która przyjmuje wartości Radius.circular() lub Radius.elliptical(). Flutter obsługuje indywidualne zaokrąglanie przez BorderRadius.only() oraz BorderRadius.horizontal()/vertical(). Widget ClipRRect przycina element potomny według zadanego BorderRadius.

// Flutter: zaokrąglanie przez ClipRRect i 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('Niestandardowe zaokrąglanie rogów'),
)

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

ClipRRect we Flutter jest używany, gdy trzeba przyciąć obraz lub złożony widget do zaokrąglonej granicy. Dla prostych kontenerów tła wystarczy BoxDecoration z borderRadius — jest bardziej wydajne, ponieważ nie tworzy osobnej warstwy przycinającej. Material Flutter 3.22+ obsługuje continuous corner radius przez ContinuousRectangleBorder.