Corner Radius — что это, радиус скругления в мобильных приложениях

Что такое corner radius?

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

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

По данным Material Design 3 (Google, 2026), скругление углов классифицируется на три уровня: small (4 dp) для кнопок и полей ввода, medium (8–12 dp) для карточек и листов, large (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 радиус создаёт более плавное скругление за счёт использования кривой Безье третьего порядка вместо дуги окружности. SwiftUI поддерживает этот стиль через параметр style: .continuous в RoundedRectangle. Apple рекомендует continuous corner radius для всех системных элементов как визуально более естественный.

Corner radius в Android: shape и Compose

В Android скругление углов традиционно реализуется через XML-ресурсы shape в папке res/drawable. Shape определяет форму фона с параметрами cornerRadius и solid. Для разных углов используются <, bottom, top и <right. В 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.