Corner Radius — apa itu, radius pembulatan di aplikasi mobile

Apa itu corner radius?

Corner radius — nilai numerik yang menentukan tingkat pembulatan sudut elemen persegi panjang. Semakin tinggi nilainya, semakin bulat sudutnya. Pada nilai 0 sudut tetap siku-siku (90°), pada nilai setengah dari sisi terpendek, elemen berubah menjadi lingkaran (untuk persegi) atau persegi panjang membulat dengan sisi lurus (kapsul).

Dalam desain mobile, corner radius digunakan untuk: kartu dan ubin, tombol, bidang input, jendela modal, gambar dan avatar, indikator kemajuan, chip dan lencana. Setiap jenis elemen memiliki rentang yang direkomendasikan pembulatan, berdasarkan pedoman Material Design dan Human Interface Guidelines.

Menurut Material Design 3 (Google, 2026), pembulatan sudut diklasifikasikan menjadi tiga tingkatan: small (4 dp) untuk tombol dan bidang input, medium (8–12 dp) untuk kartu dan lembaran, large (16–28 dp) untuk dialog dan bottom sheet. HIG Apple (2025) merekomendasikan corner radius seragam 10–12 pt untuk elemen sistem (UIButton, UITextField) dan 20+ pt untuk presentasi modal.

Corner radius di iOS: CALayer dan SwiftUI

Di iOS pembulatan sudut dilakukan melalui properti cornerRadius di CALayer. Di UIKit, setiap UIView memiliki layer yang dapat diatur cornerRadius-nya. Untuk pembulatan yang lebih kompleks (radius berbeda untuk sudut berbeda) digunakan maskedCorners dan CACornerMask dalam kombinasi dengan UIBezierPath.

// UIKit: pembulatan melalui CALayer
import UIKit

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

Di SwiftUI pembulatan diatur melalui modifier cornerRadius() atau melalui ClipShape dengan RoundedRectangle. SwiftUI juga mendukung pembulatan sudut individual melalui UIRectCorner dalam kombinasi dengan clipped() dan overlay().

// SwiftUI: pembulatan melalui RoundedRectangle
import SwiftUI

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

// Pembulatan sudut individual
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — gaya pembulatan yang digunakan Apple di iOS sejak rilis iOS 7. Berbeda dengan radius klasik (circular), continuous radius menciptakan pembulatan yang lebih halus dengan menggunakan kurva Bezier orde ketiga sebagai ganti busur lingkaran. SwiftUI mendukung gaya ini melalui parameter style: .continuous di RoundedRectangle. Apple merekomendasikan continuous corner radius untuk semua elemen sistem karena lebih alami secara visual.

Corner radius di Android: shape dan Compose

Di Android pembulatan sudut secara tradisional dilakukan melalui sumber daya XML shape di folder res/drawable. Shape mendefinisikan bentuk latar belakang dengan parameter cornerRadius dan solid. Untuk sudut yang berbeda digunakan <, bottom, top dan <right. Di Material Design 3 ditambahkan MaterialShapeDrawable dengan dukungan untuk tema dan bentuk dinamis.

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

Di Jetpack Compose pembulatan diatur melalui parameter shape di Modifier. Compose menyediakan RoundedCornerShape dengan dukungan untuk radius berbeda untuk setiap sudut dan gaya (CircularShape atau CutCornerShape). Compose juga mendukung continuous corner radius melalui RoundedCornerShape dalam kombinasi dengan kontur grafis.

// Jetpack Compose: pembulatan melalui 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 = "Kartu dengan pembulatan kustom")
}

MaterialShapeDrawable di Android View System memungkinkan perubahan dinamis corner radius tanpa membuat ulang drawable. Gunakan ShapeAppearanceModel untuk konfigurasi yang tepat: atur cornerFamily (rounded atau cut) dan cornerSize untuk setiap sudut secara terpisah.

Cara memilih corner radius yang tepat

Pemilihan corner radius tergantung pada jenis elemen, konteks penggunaan, dan platform. Tidak ada aturan universal, tetapi Material Design dan HIG Apple memberikan rekomendasi yang jelas untuk komponen standar. Prinsip dasar: pembulatan harus terlihat, tetapi tidak mengganggu konten.

Aturan kontras: elemen dengan corner radius berbeda dalam satu antarmuka harus berbeda setidaknya 4 dp agar perbedaan visual terlihat. Jangan gunakan 3 tingkat pembulatan pada satu layar — ini menciptakan kebisingan visual. Material Design 3 merekomendasikan penggunaan tidak lebih dari dua tingkat pembulatan per layar: satu untuk wadah (kartu, dialog) dan satu untuk elemen interaktif (tombol, bidang).

Corner radius di Flutter

Di Flutter pembulatan sudut dilakukan melalui kelas BorderRadius, yang menerima nilai Radius.circular() atau Radius.elliptical(). Flutter mendukung pembulatan individual melalui BorderRadius.only() dan BorderRadius.horizontal()/vertical(). Widget ClipRRect memotong elemen anak sesuai dengan BorderRadius yang diberikan.

// Flutter: pembulatan melalui ClipRRect dan 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('Pembulatan sudut kustom'),
)

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

ClipRRect di Flutter digunakan ketika perlu memotong gambar atau widget kompleks di sepanjang batas yang membulat. Untuk wadah latar belakang sederhana, BoxDecoration dengan borderRadius sudah cukup — ini lebih efisien karena tidak membuat lapisan pemotongan terpisah. Material Flutter 3.22+ mendukung continuous corner radius melalui ContinuousRectangleBorder.