Corner Radius — що це, радіус скруглення в мобільних додатках

Що таке corner radius?

Corner radius — числове значення, що визначає ступінь скруглення кутів прямокутного елемента. Чим вище значення, тим більш округлим стає кут. При значенні 0 кут залишається прямим (90°), при значенні, що дорівнює половині меншої сторони, елемент перетворюється на коло (для квадрата) або на скруглений прямокутник з прямими сторонами (капсула).

В мобільному дизайні corner radius використовується для: карток і плиток, кнопок, полів введення, модальних вікон, зображень і аватарів, індикаторів прогресу, чіпів і бейджів. Кожен тип елемента має рекомендований діапазон скруглення, заснований на гайдлайнах Material Design та Human Interface Guidelines.

За даними Material Design 3 (Google, 2026), скруглення кутів класифікується на три рівні: малий (4 dp) для кнопок і полів введення, середній (8–12 dp) для карток і листів, великий (16–28 dp) для діалогів і боттом-шитів. HIG Apple (2025) рекомендує єдиний corner radius 10–12 pt для системних елементів (UIButton, UITextField) і 20+ pt для модальних презентацій.

Corner radius на iOS: CALayer і SwiftUI

На iOS скруглення кутів реалізується через властивість cornerRadius у CALayer. В UIKit кожен UIView має шар, у якого можна встановити cornerRadius. Для складніших скруглень (різні радіуси для різних кутів) використовується maskedCorners і CACornerMask у комбінації з UIBezierPath.

// UIKit: скруглення через CALayer
import UIKit

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

В SwiftUI скруглення задається через модифікатор cornerRadius() або через ClipShape з RoundedRectangle. SwiftUI також підтримує індивідуальне скруглення кутів через UIRectCorner у комбінації з clipped() та overlay().

// SwiftUI: скруглення через RoundedRectangle
import SwiftUI

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

// Індивідуальне скруглення кутів
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — стиль скруглення, який використовується Apple в iOS з моменту виходу iOS 7. На відміну від класичного радіуса (circular), continuous radius створює більш плавне скруглення за рахунок використання кривої Без'є третього порядку замість дуги кола. SwiftUI підтримує цей стиль через параметр style: .continuous в RoundedRectangle. Apple рекомендує continuous corner radius для всіх системних елементів як візуально більш природний.

Corner radius в Android: shape і Compose

В Android скруглення кутів традиційно реалізується через XML-ресурси shape в папці res/drawable. Shape визначає форму фону з параметрами cornerRadius та solid. Для різних кутів використовується <corners android:bottomLeftRadius="..." />. В Material Design 3 додано MaterialShapeDrawable з підтримкою тем та динамічних форм.

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

В Jetpack Compose скруглення задається через параметр shape у Modifier. Compose надає RoundedCornerShape з підтримкою різних радіусів для кожного кута та стилем (CircularShape або CutCornerShape). Compose також підтримує continuous corner radius через RoundedCornerShape у комбінації з графічною обводкою.

// Jetpack Compose: скруглення через 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 з кастомним скругленням")
}

MaterialShapeDrawable в Android View System дозволяє динамічно змінювати corner radius без перестворення drawable. Використовуйте ShapeAppearanceModel для точного налаштування: встановіть cornerFamily (rounded або cut) та cornerSize для кожного кута окремо.

Як вибрати правильний corner radius

Вибір corner radius залежить від типу елемента, контексту використання та платформи. Універсального правила не існує, але Material Design та HIG Apple дають чіткі рекомендації для стандартних компонентів. Основний принцип: скруглення повинно бути помітним, але не заважати вмісту.

Правило контрасту: елементи з різним corner radius в одному інтерфейсі повинні відрізнятися мінімум на 4 dp, щоб візуальна різниця була помітною. Не використовуйте 3 рівні скруглення на одному екрані — це створює візуальний шум. Material Design 3 рекомендує використовувати не більше двох рівнів скруглення на екран: один для контейнерів (картки, діалоги) і один для інтерактивних елементів (кнопки, поля).

Corner radius у Flutter

У Flutter скруглення кутів реалізується через клас BorderRadius, який приймає значення Radius.circular() або Radius.elliptical(). Flutter підтримує індивідуальне скруглення через BorderRadius.only() та BorderRadius.horizontal()/vertical(). Віджет ClipRRect обрізає дочірній елемент за заданим BorderRadius.

// Flutter: скруглення через ClipRRect і 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('Кастомне скруглення кутів'),
)

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

ClipRRect у Flutter використовується, коли потрібно обрізати зображення або складний віджет по скругленій границі. Для простих фонових контейнерів достатньо BoxDecoration з borderRadius — це продуктивніше, оскільки не створює окремого обрізаючого шару. Material Flutter 3.22+ підтримує continuous corner radius через ContinuousRectangleBorder.