Subtlety artinya memakai beda yang kecil tapi cukup: garis 1px abu muda, shadow yang samar, sudut yang sedikit membulat. Corner radius adalah seberapa bulat sudut sebuah kotak, ditulis dengan border-radius. Bayangin lintasan lari di stadion. Di tikungan, jalur dalam dan jalur luar melengkung dari titik pusat yang sama, jadi lebar tiap jalur tetap sama sepanjang tikungan. Kalau jalur luar dibuat sama lengkungnya dengan jalur dalam, jalurnya melebar di tikungan dan pelari di luar dirugikan. Sudut kotak di dalam kotak bekerja persis seperti itu.
🧪 Tebakan cepat: Kartu Kamar Teras punya sudut 16px, dan fotonya diberi jarak 8px dari tepi kartu. Supaya "serasi", foto juga diberi radius 16px. Jarak antara tepi kartu dan foto di sudutnya masih 8px? Jawabannya ada di bagian "Radius bersarang: luar = dalam + padding".
Subtlety: beda kecil yang cukup
Kartu cukup dipisah dari latar dengan beda yang kecil. Bandingkan dua kartu ini:
/* Keras: semuanya berteriak */
.card-keras { border: 3px solid #000; box-shadow: 5px 5px 0 #000; border-radius: 20px; }
/* Halus: cukup untuk terlihat, gak mencuri perhatian */
.card {
border: 1px solid #E5E7EB;
border-radius: 0.75rem; /* 12px */
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card button { border-radius: 0.5rem; } /* 8px */
- Garis
#E5E7EBdi atas putih kontrasnya cuma 1,24:1, dan itu sudah cukup: garis kartu adalah dekorasi, jadi gak wajib 3:1 seperti garis kolom input (WCAG 1.4.11 cuma meminta 3:1 untuk batas yang diperlukan untuk mengenali sebuah kontrol). - Shadow
rgba(0, 0, 0, 0.1)di titik paling gelapnya cuma mengubah putih jadi#e6e6e6(1,25:1). Samar, tapi mata menangkapnya. - Garis
3px solid #000(21:1) dan shadow keras 5px membuat kartu lebih keras daripada isinya. Kalau tiap kartu berteriak, tombol "Pesan kamar" gak lagi menonjol. padding: 24pxmemberi ruang di dalam kartu, dan tombolnya memakai radius yang lebih kecil,0.5rem.
Skala radius: sedikit nilai, dipakai konsisten
Sama seperti jarak, radius diambil dari skala kecil, lalu dipakai sama untuk komponen yang sama:
| Nilai | px (root 16px) | Dipakai untuk |
|---|---|---|
0.25rem |
4px | badge "Sisa 2 kamar", tag |
0.5rem |
8px | tombol, kolom input |
0.75rem |
12px | kartu kamar |
1rem |
16px | kartu besar, dialog |
9999px |
setengah tinggi | pill: tag bulat, tombol kecil |
Aturannya: semua kartu 12px, semua tombol 8px. Tiga tombol dengan tiga radius berbeda terlihat seperti diambil dari tiga situs. Radius kecil terasa lebih resmi, radius besar lebih ramah; pilih satu kesan dan pakai di semua komponen.
Pill: 9999px, bukan 50%
Untuk tombol berbentuk pill (ujung kiri dan kanannya setengah lingkaran), tulis border-radius: 9999px. Angka sebesar itu gak membuat tombol aneh, karena CSS punya aturan: kalau jumlah dua radius di satu sisi lebih besar dari panjang sisinya, browser mengecilkan semua radius dengan faktor yang sama sampai muat. Tombol setinggi 48px dengan 9999px akhirnya memakai radius 24px, tepat setengah tingginya, di ukuran berapa pun.
border-radius: 50% berbeda: 50% dari lebar untuk arah mendatar, 50% dari tinggi untuk arah tegak. Di kotak persegi (foto profil Bu Sri 40 × 40px) hasilnya lingkaran. Di tombol 300 × 48px hasilnya elips, bukan pill.
Radius bersarang: luar = dalam + padding
Kalau ada kotak di dalam kotak, misalnya foto di dalam kartu, sudut keduanya harus melengkung dari titik pusat yang sama, seperti jalur lari. Rumusnya:
radius dalam = radius luar - padding
Kartu Kamar Teras punya radius 16px dan padding 8px, jadi fotonya 16 - 8 = 8px. Begitu juga container dengan radius 12px dan padding 8px: elemen di dalamnya 12 - 8 = 4px.
Ini jarak antara tepi kartu dan tepi foto, diukur di garis diagonal 45 derajat di sudutnya (padding 8px, radius kartu 16px):
| Radius foto | Jarak di sisi lurus | Jarak di sudut |
|---|---|---|
| 16px (sama dengan kartu) | 8px | 11,31px |
| 8px (16 - 8) | 8px | 8px |
| 0 (siku) | 8px | 4,69px |
Jadi jawaban tebakannya: gak. Dengan radius 16px, jaraknya melebar jadi 11,31px di sudut, dan foto terlihat "mengambang". Dengan 8px, jaraknya 8px di mana-mana. Itu jawaban tebakannya.
Kalau padding-nya lebih besar dari radius luar, rumusnya jadi nol atau minus. Itu yang terjadi di latihan: kartu 12px dengan padding 24px. Tombol di dalamnya duduk jauh dari lengkungan kartu, jadi dia memakai radius dari skalanya sendiri, 0.5rem.
⚠️ Jebakan yang sering ketemu
- Radius sama di dalam dan di luar. Jaraknya melebar di sudut (11,31px, bukan 8px). Kurangi dengan padding-nya.
50%untuk pill. Di tombol yang lebar hasilnya elips. Pakai9999px.- Foto tanpa jarak dan tanpa
overflow: hidden. Foto bersudut siku yang menempel di kartu 16px menonjol 6,63px keluar dari lengkungan di sudutnya. Beri kartuoverflow: hidden, atau beri foto radius yang sama karena padding-nya 0. - Garis dan shadow yang keras.
3px solid #000membuat semua kartu bersaing. Mulai dari yang halus, dan naikkan cuma kalau memang belum terlihat.
TL;DR: Subtlety: beda kecil yang cukup, misalnya garis 1px solid #E5E7EB (1,24:1, dekorasi, gak wajib 3:1) dan shadow 0 1px 3px rgba(0, 0, 0, 0.1), bukan 3px solid #000. Ambil radius dari skala kecil dan pakai konsisten: badge 4px, tombol 0.5rem (8px), kartu 0.75rem (12px), kartu besar 16px. Pill = border-radius: 9999px, karena browser mengecilkan radius yang kebesaran sampai setengah tinggi; 50% cuma bulat di kotak persegi, di tombol lebar jadi elips. Radius bersarang: radius dalam = radius luar - padding, jadi 16px dengan padding 8px = 8px, dan 12px dengan padding 8px = 4px; dengan radius yang sama, jarak di sudut melebar jadi 11,31px. Kalau padding lebih besar dari radius luar, elemen dalam memakai radius dari skalanya sendiri.
