border-radius adalah properti CSS untuk melengkungkan sudut elemen — dari sudut yang sedikit membulat sampai lingkaran penuh. Meskipun namanya mengandung kata “border”, properti ini bekerja tanpa perlu ada border sama sekali: kamu bisa melengkungkan sudut div, tombol, gambar, atau input apa pun hanya dengan satu baris, misalnya border-radius: 8px.

Kelihatannya sepele, tapi hampir semua UI modern dibangun di atas properti kecil ini: tombol pill, avatar lingkaran, card dengan sudut lembut, chat bubble, sampai gambar thumbnail. Di panduan ini kita bahas tuntas — sintaks dari satu sampai empat nilai, kenapa 50% kadang menghasilkan elips (bukan lingkaran), kumpulan resep siap pakai, cheatsheet lengkap utility rounded di Tailwind, kesalahan umum, dan FAQ.

Border Radius Adalah… (Definisi dan Cara Kerja)

Border radius adalah properti CSS yang menentukan seberapa melengkung sudut-sudut sebuah elemen. Nilainya bisa dalam satuan panjang (px, rem, em) atau persen, dan bisa diatur untuk keempat sudut sekaligus atau per sudut secara terpisah. Semakin besar nilainya, semakin bulat sudutnya — sampai batas maksimal di mana dua sudut yang bersebelahan bertemu dan elemen berubah jadi pill atau lingkaran.

Contoh paling dasar:

<div class="kotak">Halo!</div>

.kotak {
  background: #3b82f6;
  color: white;
  padding: 24px;
  border-radius: 12px; /* keempat sudut melengkung 12px */
}

Nilai 12px di situ artinya: setiap sudut dilengkungkan mengikuti seperempat lingkaran dengan jari-jari 12 piksel. Bayangkan kamu menempelkan koin berjari-jari 12px di tiap pojok elemen, lalu memotong sudutnya mengikuti tepi koin — itulah persisnya yang dilakukan browser.

Dua fakta penting yang sering bikin pemula ragu-ragu:

border-radius tidak butuh border. Elemen dengan background polos tanpa garis tepi tetap bisa dilengkungkan. Kalau elemen punya border, garis border-nya ikut melengkung mengikuti radius yang sama. Kalau kamu belum akrab dengan properti border itu sendiri (ketebalan, style, warna), pelajari dulu lewat materi border CSS di Hyper Sheets — border dan border-radius memang sering dipakai berpasangan.
border-radius tidak mengubah ukuran elemen. Ia murni efek visual pada bentuk; lebar, tinggi, padding, dan margin tetap dihitung seperti biasa. Bahkan area klik elemen ikut mengikuti bentuk melengkungnya — klik di pojok yang “terpotong” tidak akan mengenai elemen tersebut.

Kalau kamu mau langsung praktik sambil membaca artikel ini, lesson border-radius di Hyper Sheets menyediakan editor langsung di browser — setiap konsep di bawah bisa kamu ketik dan lihat hasilnya detik itu juga.

Sintaks border-radius: Dari Satu Nilai sampai Empat Nilai

Shorthand border-radius menerima satu sampai empat nilai, dan urutannya selalu searah jarum jam dimulai dari sudut kiri-atas. Satu nilai berlaku untuk semua sudut; empat nilai mengatur tiap sudut sendiri-sendiri. Selain shorthand, ada juga properti longhand per sudut seperti border-top-left-radius kalau kamu hanya ingin menyentuh satu sudut.

Urutan Nilai: Searah Jarum Jam dari Kiri-Atas

/* 1 nilai: semua sudut sama */
.a { border-radius: 12px; }

/* 2 nilai: (kiri-atas & kanan-bawah) (kanan-atas & kiri-bawah) */
.b { border-radius: 12px 4px; }

/* 3 nilai: kiri-atas (kanan-atas & kiri-bawah) kanan-bawah */
.c { border-radius: 12px 4px 24px; }

/* 4 nilai: kiri-atas, kanan-atas, kanan-bawah, kiri-bawah */
.d { border-radius: 12px 4px 24px 0; }

Yang paling sering kamu pakai di dunia nyata adalah versi 1 nilai dan 4 nilai. Cara menghafal versi 4 nilai: mulai dari kiri-atas, lalu putar searah jarum jam — kiri-atas → kanan-atas → kanan-bawah → kiri-bawah. Sama persis dengan pola margin dan padding (atas → kanan → bawah → kiri), hanya saja titik awalnya sudut, bukan sisi.

Contoh nyata pola 4 nilai — chat bubble ala aplikasi pesan, yang semua sudutnya bulat kecuali satu “ekor” di kiri-bawah:

.bubble {
  background: #e2e8f0;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  /* kiri-atas 16, kanan-atas 16, kanan-bawah 16, kiri-bawah 4 */
}

Longhand: Mengatur Satu Sudut Saja

Kalau kamu hanya perlu melengkungkan satu sudut tanpa menyentuh yang lain, ada empat properti terpisah:

.elemen {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Empat baris di atas setara dengan border-radius: 8px 8px 0 0 — pola klasik untuk tab atau header card yang menyatu dengan konten di bawahnya:

.tab {
  border-radius: 8px 8px 0 0; /* hanya dua sudut atas yang melengkung */
  background: white;
  padding: 10px 20px;
}

Longhand berguna saat kamu meng-override sebagian: misalnya semua card memakai border-radius: 12px, tapi khusus card pertama dalam daftar, sudut bawahnya mau dibuat siku. Cukup timpa dua properti bawahnya tanpa menulis ulang keempat nilai.

Nilai Persen vs Piksel: Kenapa 50% Tidak Selalu Jadi Lingkaran

Nilai piksel menghasilkan lengkungan dengan ukuran tetap, sedangkan nilai persen dihitung relatif terhadap dimensi elemen — persen horizontal dari lebar, persen vertikal dari tinggi. Inilah kenapa border-radius: 50% menghasilkan lingkaran sempurna hanya jika elemennya persegi. Pada elemen yang lebarnya tidak sama dengan tingginya, 50% menghasilkan elips.

Mari buktikan:

/* Persegi 100×100 → lingkaran sempurna */
.persegi {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Persegi panjang 200×100 → ELIPS, bukan lingkaran */
.panjang {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

Pada .panjang, browser menghitung radius horizontal = 50% × 200px = 100px, dan radius vertikal = 50% × 100px = 50px. Setiap sudut jadi seperempat elips 100×50 — hasil akhirnya bentuk oval seperti stadion yang penyok, bukan lingkaran. Ini bukan bug; memang begitulah spesifikasinya bekerja.

Aturan praktisnya:

Pakai persen (50%) saat kamu ingin bentuk mengikuti proporsi elemen — lingkaran untuk elemen persegi, elips untuk persegi panjang.
Pakai piksel saat kamu ingin lengkungan konsisten berapa pun ukuran elemennya — sudut card 12px tetap terlihat sama di card kecil maupun besar.

Elliptical Radius: Sintaks Garis Miring

Kamu juga bisa membuat sudut elips secara eksplisit dengan slash syntax: nilai sebelum garis miring adalah radius horizontal, sesudahnya radius vertikal.

.oval-corner {
  border-radius: 40px / 20px;
  /* setiap sudut: melengkung 40px ke samping, 20px ke atas-bawah */
}

/* bisa juga dikombinasikan per sudut */
.fancy {
  border-radius: 40px 20px / 20px 40px;
}

Jujur saja: sintaks ini jarang dipakai sehari-hari. Tapi mengenalnya membantu kamu membaca CSS orang lain tanpa bingung, dan sesekali berguna untuk bentuk organik seperti blob dekoratif.

Resep border-radius Siap Pakai

Lima bentuk yang paling sering dibutuhkan: tombol pill pakai 9999px, avatar lingkaran pakai 50% plus rasio persegi, card pakai 8–16px, input field pakai 6–8px, dan sudut selektif pakai shorthand 4 nilai. Bagian ini adalah kumpulan resep yang bisa kamu salin langsung ke proyek — masing-masing dengan penjelasan kenapa nilainya begitu.

Tombol Pill: border-radius 9999px

<button class="btn-pill">Mulai Belajar</button>

.btn-pill {
  padding: 12px 28px;
  border: none;
  background: #3b82f6;
  color: white;
  font-size: 16px;
  border-radius: 9999px; /* ujung setengah lingkaran sempurna */
  cursor: pointer;
}

Kenapa 9999px dan bukan 50%? Karena 50% pada tombol (yang lebarnya jauh melebihi tingginya) menghasilkan ujung elips yang aneh — melengkung terlalu landai di sisi kiri-kanan. Sedangkan nilai piksel yang “kebesaran” seperti 9999px otomatis di-clamp oleh browser: kalau dua radius yang bersebelahan tidak muat, browser mengecilkan semuanya secara proporsional sampai pas. Hasil akhirnya ujung tombol jadi setengah lingkaran sempurna, berapa pun ukuran tombolnya. Trik ini juga yang dipakai utility rounded-full di Tailwind.

Avatar Lingkaran: 50% + Rasio Persegi

<img class="avatar" src="foto-profil.jpg" alt="Foto profil pengguna" />

.avatar {
  width: 64px;
  aspect-ratio: 1 / 1;   /* paksa tinggi = lebar → selalu persegi */
  border-radius: 50%;    /* persegi + 50% = lingkaran */
  object-fit: cover;     /* foto dipangkas, bukan digepengkan */
}

Tiga baris ini saling melengkapi dan ketiganya wajib: aspect-ratio: 1 / 1 menjamin elemen selalu persegi (syarat 50% menghasilkan lingkaran), dan object-fit: cover memastikan foto yang aslinya tidak persegi dipangkas rapi alih-alih penyok. Ya — border-radius bekerja langsung pada elemen img, tidak perlu dibungkus div. Kalau konsep lebar, tinggi, dan rasio elemen masih samar buat kamu, panduan width dan height di CSS membahasnya dari dasar.

Card: 8–16px, Secukupnya

.card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}

Untuk card, rentang 8–16px adalah zona aman yang dipakai hampir semua design system: cukup lembut untuk terasa modern, tapi tidak sampai “menggerus” area konten di pojok. Radius yang terlalu besar di card kecil membuat konten pojok terasa terjepit dan card tampak seperti kapsul. Soal kapan garis dan lengkungan membantu (atau justru meramaikan) sebuah desain, materi borders dan dividers di Hyper Sheets membahasnya dari sisi UI/UX — pelengkap yang bagus setelah kamu menguasai sisi teknisnya.

Input Field: 6–8px + Border

.input {
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 16px;
}
.input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Input biasanya diberi radius sedikit lebih kecil daripada card yang menampungnya, supaya hierarki bentuknya terasa natural. Perhatikan juga bahwa border input ikut melengkung mengikuti radius — kamu tidak perlu mengatur apa pun tambahan.

Gambar di Dalam Card: overflow hidden

Ini kasus yang paling sering bikin frustrasi: card sudah diberi border-radius, tapi gambar di dalamnya tetap bersudut siku dan “menembus” lengkungan parent.

<article class="card-foto">
  <img src="thumbnail.jpg" alt="Thumbnail artikel" />
  <div class="isi">
    <h3>Judul Artikel</h3>
  </div>
</article>

.card-foto {
  border-radius: 16px;
  overflow: hidden; /* kunci: pangkas anak yang menutupi sudut */
  border: 1px solid #e2e8f0;
}
.card-foto img {
  width: 100%;
  display: block;
}

Penyebabnya: border-radius tidak diwariskan ke elemen anak. Parent-nya melengkung, tapi gambar di pojok atas tetap kotak dan menutupi lengkungan itu. Solusi paling bersih adalah overflow: hidden pada parent — semua anak dipangkas mengikuti bentuk melengkung parent. Alternatifnya, beri radius hanya pada gambar itu sendiri (border-radius: 16px 16px 0 0), tapi kamu jadi harus menjaga dua nilai tetap sinkron.

Rounded di Tailwind: Cheatsheet Lengkap

Di Tailwind CSS, border-radius diatur lewat utility rounded-*: dari rounded-none (siku) sampai rounded-full (pill/lingkaran), dengan skala nilai yang sudah didesain konsisten. Kamu tinggal menempelkan class di HTML tanpa menulis CSS — dan karena skalanya terbatas, desain antar-komponen otomatis lebih seragam.

Skala lengkapnya:

Class (Tailwind v4)	Class (Tailwind v3)	Nilai	Cocok untuk
`rounded-none`	`rounded-none`	0	Sudut siku, tabel, elemen flush
`rounded-xs`	`rounded-sm`	2px	Lengkungan super halus
`rounded-sm`	`rounded`	4px	Badge, tag, checkbox
`rounded-md`	`rounded-md`	6px	Input, tombol kecil
`rounded-lg`	`rounded-lg`	8px	Tombol, input, dropdown
`rounded-xl`	`rounded-xl`	12px	Card
`rounded-2xl`	`rounded-2xl`	16px	Card besar, modal
`rounded-3xl`	`rounded-3xl`	24px	Hero section, container dekoratif
`rounded-full`	`rounded-full`	9999px	Pill, avatar, badge bulat

Catatan penting soal penamaan: di Tailwind v4, dua class paling kecil berganti nama — rounded-sm lama menjadi rounded-xs, dan rounded polos menjadi rounded-sm. Sisanya (rounded-md ke atas) tidak berubah. Kalau kamu membaca tutorial lama yang memakai rounded tanpa akhiran, itu gaya penamaan v3.

Contoh pemakaian dasar:

<button class="rounded-full bg-blue-500 px-7 py-3 text-white">
  Tombol Pill
</button>

<img class="size-16 rounded-full object-cover" src="avatar.jpg" alt="Avatar" />

<div class="rounded-xl border border-slate-200 p-5">Card</div>

Per Sisi dan Per Sudut

Tailwind juga menyediakan versi selektif — sisipkan kode arah di tengah class:

Per sisi (dua sudut sekaligus): rounded-t-lg (atas), rounded-r-lg (kanan), rounded-b-lg (bawah), rounded-l-lg (kiri).
Per sudut: rounded-tl-lg (kiri-atas), rounded-tr-lg (kanan-atas), rounded-br-lg (kanan-bawah), rounded-bl-lg (kiri-bawah).

<!-- Tab: hanya sudut atas yang melengkung -->
<button class="rounded-t-lg bg-white px-5 py-2">Tab Aktif</button>

<!-- Chat bubble: semua bulat kecuali kiri-bawah -->
<p class="rounded-2xl rounded-bl-sm bg-slate-200 px-4 py-3">
  Halo, ada yang bisa dibantu?
</p>

Perhatikan trik di chat bubble: class yang lebih spesifik (rounded-bl-sm) menimpa class umum (rounded-2xl) hanya untuk sudut kiri-bawah — persis seperti longhand menimpa shorthand di CSS murni.

Nilai Arbitrary

Kalau nilai di skala tidak ada yang pas, pakai arbitrary value dengan kurung siku:

<div class="rounded-[10px]">Radius custom 10px</div>
<div class="rounded-tl-[32px]">Hanya kiri-atas, 32px</div>

Gunakan seperlunya — kekuatan Tailwind justru di skala yang konsisten. Kalau kamu terus-menerus menulis nilai arbitrary yang sama, itu tanda nilai tersebut layak dimasukkan ke konfigurasi tema.

Untuk latihan interaktif utility ini satu per satu, kerjakan latihan border dan rounded versi Tailwind di Hyper Sheets. Dan kalau kamu baru mulai dengan Tailwind secara umum, baca dulu panduan Tailwind CSS untuk pemula supaya paham cara kerja utility-first sebelum menghafal class-nya.

Praktik: Membuat Card Profil dengan Semua Resep

Cara terbaik memantapkan border-radius adalah memakai beberapa resep sekaligus dalam satu komponen nyata: card melengkung, foto banner yang terpangkas rapi, avatar lingkaran, dan tombol pill. Kita bangun card profil sederhana — pertama dengan CSS murni, lalu versi Tailwind-nya sebagai perbandingan.

Kalau struktur HTML-nya masih terasa asing, mampir dulu ke panduan belajar HTML untuk pemula — di sini kita fokus ke bentuknya.

Versi CSS Murni

<article class="profil">
  <img class="profil-banner" src="banner.jpg" alt="Banner profil" />
  <img class="profil-avatar" src="avatar.jpg" alt="Foto Rina" />
  <div class="profil-isi">
    <h3>Rina Puspita</h3>
    <p>Front-end developer. Suka CSS dan kopi.</p>
    <button class="profil-tombol">Follow</button>
  </div>
</article>

.profil {
  width: 320px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;   /* resep card */
  overflow: hidden;      /* pangkas banner di sudut atas */
}

.profil-banner {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
}

.profil-avatar {
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;    /* resep avatar lingkaran */
  object-fit: cover;
  border: 3px solid white; /* "cincin" pemisah dari banner */
  margin: -36px 0 0 20px;  /* setengah avatar menimpa banner */
  position: relative;
}

.profil-isi {
  padding: 12px 20px 20px;
}

.profil-tombol {
  margin-top: 12px;
  padding: 8px 24px;
  border: none;
  background: #3b82f6;
  color: white;
  border-radius: 9999px; /* resep tombol pill */
  cursor: pointer;
}

Perhatikan bagaimana empat konsep dari artikel ini bekerja bersama: card memakai 16px (nilai tetap supaya konsisten), banner terpangkas oleh overflow: hidden milik parent, avatar memakai 50% plus aspect-ratio supaya dijamin bulat, dan tombolnya 9999px supaya jadi pill sempurna. Border putih 3px di avatar bahkan ikut melengkung otomatis — bonus dari fakta bahwa border selalu mengikuti radius.

Versi Tailwind

Komponen yang sama, ditulis dengan utility class:

<article class="w-80 overflow-hidden rounded-2xl border border-slate-200 bg-white">
  <img class="block h-24 w-full object-cover" src="banner.jpg" alt="Banner profil" />
  <img
    class="relative -mt-9 ml-5 size-18 rounded-full border-3 border-white object-cover"
    src="avatar.jpg"
    alt="Foto Rina"
  />
  <div class="px-5 pb-5 pt-3">
    <h3 class="font-semibold">Rina Puspita</h3>
    <p class="text-sm text-slate-600">Front-end developer. Suka CSS dan kopi.</p>
    <button class="mt-3 rounded-full bg-blue-500 px-6 py-2 text-white">
      Follow
    </button>
  </div>
</article>

Pemetaannya satu-banding-satu: rounded-2xl = border-radius: 16px, overflow-hidden = overflow: hidden, rounded-full di avatar = border-radius: 9999px (yang pada elemen persegi hasilnya sama dengan lingkaran), dan rounded-full di tombol = resep pill. Begitu kamu paham versi CSS-nya, versi Tailwind tinggal soal menghafal nama class.

Kesalahan Umum Saat Memakai border-radius

Empat kesalahan yang paling sering terjadi: mengharapkan lingkaran dari 50% pada elemen non-persegi, anak elemen yang menembus lengkungan parent, radius terlalu besar untuk elemen kecil, dan avatar penyok karena lupa menjaga rasio. Semuanya punya solusi satu-dua baris — berikut daftarnya.

1. Pakai 50% tapi Hasilnya Elips, Bukan Lingkaran

Sudah dibahas di atas, tapi ini juara satu kebingungan pemula: border-radius: 50% hanya menghasilkan lingkaran kalau lebar = tinggi. Pada elemen 200×100, hasilnya elips. Solusi:

.harus-bulat {
  aspect-ratio: 1 / 1; /* kunci rasio persegi */
  border-radius: 50%;
}

Atau, kalau yang kamu inginkan sebenarnya bentuk pill (ujung setengah lingkaran pada elemen memanjang), yang kamu butuhkan bukan 50% melainkan nilai piksel besar seperti 9999px.

2. Sudut Anak “Menembus” Lengkungan Parent

Card sudah border-radius: 16px, tapi pojoknya tetap terlihat siku karena gambar/elemen anak di pojok menutupinya. Ingat: radius tidak diwariskan. Tambahkan overflow: hidden pada parent:

.card {
  border-radius: 16px;
  overflow: hidden;
}

Satu hal yang perlu diwaspadai: overflow: hidden juga memangkas apa pun yang sengaja keluar dari card — dropdown, tooltip, atau badge yang menonjol. Kalau ada elemen seperti itu, beri radius langsung ke anak yang bermasalah saja alih-alih memangkas seisi parent.

3. Radius Terlalu Besar untuk Elemen Kecil

border-radius: 24px di hero section terlihat mewah; nilai yang sama di badge 20px tingginya membuat teks terjepit dan bentuknya jadi tidak jelas. Sesuaikan radius dengan ukuran elemen — elemen kecil, radius kecil.

Bonus tip untuk elemen bersarang (card di dalam card, gambar di dalam card ber-padding): supaya lengkungan dalam dan luar terlihat sejajar, pakai rumus radius dalam = radius luar dikurangi jarak antar keduanya:

.luar {
  border-radius: 16px;
  padding: 8px;
}
.dalam {
  border-radius: 8px; /* 16 - 8 = 8 */
}

Kalau radius dalam disamakan dengan radius luar, sudut dalamnya akan terlihat “lebih bulat” secara optik dan komposisinya terasa janggal.

4. Avatar Penyok karena Lupa aspect-ratio dan object-fit

Dua gejala umum: avatar berbentuk elips (karena width dan height-nya beda — lihat kesalahan #1), atau wajah di foto tampak digepengkan (karena gambar dipaksa mengisi kotak tanpa object-fit: cover). Resep lengkapnya selalu tiga serangkai:

.avatar {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

Di Tailwind: size-16 rounded-full object-cover — tiga class untuk tiga masalah yang sama.

FAQ Seputar Border Radius

Border radius adalah apa?

Border radius adalah properti CSS untuk melengkungkan sudut elemen. Nilainya menentukan jari-jari lengkungan tiap sudut — misalnya border-radius: 8px melengkungkan keempat sudut sebesar 8 piksel, sedangkan border-radius: 50% pada elemen persegi menghasilkan lingkaran penuh. Properti ini murni visual: tidak mengubah ukuran elemen dan tidak memerlukan border.

Apakah border-radius butuh border?

Tidak. Meskipun namanya mengandung kata “border”, border-radius bekerja pada elemen apa pun — dengan atau tanpa garis tepi. Kalau elemen kebetulan punya border, garis border-nya otomatis ikut melengkung mengikuti radius yang sama.

Bagaimana cara membuat lingkaran dengan CSS?

Buat elemen yang lebar dan tingginya sama (paling aman dengan aspect-ratio: 1 / 1), lalu beri border-radius: 50%. Untuk foto, tambahkan object-fit: cover supaya gambar dipangkas rapi, bukan digepengkan. Kalau elemennya tidak persegi, 50% akan menghasilkan elips — bukan lingkaran.

border-radius 50% artinya apa?

Artinya radius setiap sudut dihitung 50% dari dimensi elemen: radius horizontal = 50% dari lebar, radius vertikal = 50% dari tinggi. Pada elemen persegi, keduanya sama sehingga hasilnya lingkaran; pada persegi panjang, keduanya beda sehingga hasilnya elips. Karena itu 50% bukan pilihan tepat untuk tombol pill — pakai nilai piksel besar seperti 9999px.

Rounded di Tailwind itu apa?

rounded adalah keluarga utility class di Tailwind CSS untuk mengatur border-radius tanpa menulis CSS: skalanya dari rounded-none (0), rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, sampai rounded-full (9999px, untuk pill dan lingkaran). Ada juga varian per sisi (rounded-t-lg), per sudut (rounded-tl-lg), dan nilai bebas (rounded-[10px]).

Berapa nilai border-radius yang bagus untuk card dan tombol?

Tidak ada angka wajib, tapi konvensi yang dipakai luas: card 8–16px, input dan tombol biasa 6–8px, tombol pill 9999px, avatar 50% (dengan rasio persegi). Yang paling penting konsistensi — pilih dua-tiga nilai dan pakai berulang di seluruh proyek, persis seperti skala terbatas yang dipaksakan Tailwind.

Langkah Selanjutnya

Sekarang kamu pegang semuanya: sintaks satu sampai empat nilai searah jarum jam, perbedaan perilaku persen vs piksel, resep pill–avatar–card–input, trik overflow: hidden, sampai padanan lengkapnya di Tailwind. border-radius termasuk properti yang cepat melekat — karena hasilnya langsung terlihat, setiap kali kamu memakainya di proyek nyata, hafalannya makin kuat.

Langkah paling logis berikutnya: kerjakan lesson border-radius di Hyper Sheets untuk mengunci konsep CSS-nya lewat latihan bertahap dengan editor langsung di browser, lalu lanjut ke latihan versi Tailwind-nya supaya kedua “bahasa” itu sama-sama lancar. Setelah itu, gabungkan dengan properti tetangganya — border, box-shadow, padding — dan kamu sudah punya semua bahan untuk membuat komponen UI yang terlihat profesional. Selamat ngoding!