Corner Radius — What Is Corner Radius in Mobile Applications

What is corner radius?

Corner radius is a numerical value that determines the degree of rounding for the corners of a rectangular element. The higher the value, the more rounded the corner becomes. At a value of 0, the corner remains right-angled (90°); at a value equal to half the shorter side, the element turns into a circle (for a square) or a rounded rectangle with straight sides (capsule).

In mobile design, corner radius is used for: cards and tiles, buttons, input fields, modal windows, images and avatars, progress indicators, chips and badges. Each element type has a recommended range of rounding based on Material Design and Human Interface Guidelines.

According to Material Design 3 (Google, 2026), corner rounding is classified into three levels: small (4 dp) for buttons and input fields, medium (8–12 dp) for cards and sheets, large (16–28 dp) for dialogs and bottom sheets. Apple HIG (2025) recommends a uniform corner radius of 10–12 pt for system elements (UIButton, UITextField) and 20+ pt for modal presentations.

Corner radius on iOS: CALayer and SwiftUI

On iOS, corner rounding is implemented through the cornerRadius property of CALayer. In UIKit, every UIView has a layer whose cornerRadius can be set. For more complex rounding (different radii for different corners), maskedCorners and CACornerMask are used in combination with UIBezierPath.

// UIKit: rounding via CALayer
import UIKit

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

In SwiftUI, rounding is set via the cornerRadius() modifier or via ClipShape with RoundedRectangle. SwiftUI also supports individual corner rounding through UIRectCorner in combination with clipped() and overlay().

// SwiftUI: rounding via RoundedRectangle
import SwiftUI

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

// Individual corner rounding
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius is a rounding style used by Apple in iOS since iOS 7. Unlike the classic radius (circular), the continuous radius creates smoother rounding by using a third-order Bezier curve instead of a circular arc. SwiftUI supports this style through the style: .continuous parameter in RoundedRectangle. Apple recommends continuous corner radius for all system elements as visually more natural.

Corner radius in Android: shape and Compose

In Android, corner rounding is traditionally implemented through XML shape resources in the res/drawable folder. Shape defines the background form with cornerRadius and solid parameters. For different corners, <corners android:bottomLeftRadius="..." /> is used. In Material Design 3, MaterialShapeDrawable has been added with theme support and dynamic shapes.

<!-- 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, rounding is set via the shape parameter of Modifier. Compose provides RoundedCornerShape with support for different radii for each corner and style (CircularShape or CutCornerShape). Compose also supports continuous corner radius through RoundedCornerShape in combination with graphic stroke.

// Jetpack Compose: rounding 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 = "Card with custom rounding")
}

MaterialShapeDrawable in the Android View System allows dynamically changing corner radius without recreating the drawable. Use ShapeAppearanceModel for precise configuration: set cornerFamily (rounded or cut) and cornerSize for each corner individually.

How to choose the right corner radius

Choosing corner radius depends on the element type, usage context, and platform. There is no universal rule, but Material Design and Apple HIG provide clear recommendations for standard components. The main principle: rounding should be noticeable but not interfere with the content.

Contrast rule: elements with different corner radius values in the same interface should differ by at least 4 dp for the visual difference to be noticeable. Do not use 3 levels of rounding on one screen — this creates visual noise. Material Design 3 recommends using no more than two levels of rounding per screen: one for containers (cards, dialogs) and one for interactive elements (buttons, fields).

Corner radius in Flutter

In Flutter, corner rounding is implemented through the BorderRadius class, which accepts Radius.circular() or Radius.elliptical() values. Flutter supports individual rounding through BorderRadius.only() and BorderRadius.horizontal()/vertical(). The ClipRRect widget clips its child element according to the given BorderRadius.

// Flutter: rounding via ClipRRect and 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('Custom corner rounding'),
)

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

ClipRRect in Flutter is used when you need to clip an image or complex widget along a rounded border. For simple background containers, BoxDecoration with borderRadius is sufficient — this is more performant since it doesn't create a separate clipping layer. Material Flutter 3.22+ supports continuous corner radius through ContinuousRectangleBorder.