🔲

🔲 Border Radius Generator CSS

Buat lengkungan sudut antarmuka secara visual sesuai spesifikasi CSS3 W3C: mulai dari sudut kartu standar, tombol kapsul (pill), lingkaran sempurna, hingga bentuk organik cairan (Fancy 8-Value Organic Blobs) dengan radius horizontal & vertikal.

✨ 8-Value Organic Blob 💊 Pill Button & Circle 🌊 Tailwind CSS Class ⚡ Instant CSS Copy
💡 Preset Bentuk Populer:
Top-Left (Kiri Atas):16px
Top-Right (Kanan Atas):16px
Bottom-Right (Kanan Bawah):16px
Bottom-Left (Kiri Bawah):16px

Pratinjau Visual & Kode CSS

CSS Output:
border-radius: 16px;
Tailwind CSS Utility:
rounded-2xl

📖 Cara Menggunakan Cara Menggunakan Border Radius Generator

1
Pilih Mode Desain

Gunakan Mode Standar untuk sudut kartu kotak reguler atau Mode Fancy 8-Value untuk bentuk cairan organik (blob).

2
Geser Kontrol Slider

Tentukan radius tiap sudut secara terpisah atau aktifkan opsi seragam untuk menjaga simetri.

3
Gunakan Preset Populer

Pilih langsung preset Card (16px), Pill Button (9999px), Avatar Circle, atau Fluid Leaf.

4
Salin CSS atau Tailwind

Salin baris kode CSS murni atau utility class Tailwind CSS ke lembar gaya proyek Anda.

Spesifikasi CSS3: Memahami Sintaks Slash (/) pada 8-Value

📐 Radius Horizontal vs Vertikal Nilai sebelum garis miring (/) mendefinisikan kelengkungan horizontal, sedangkan nilai setelah garis miring mendefinisikan kelengkungan vertikal pada elips sudut.
💊 Tombol Kapsul (Pill Shape) Menggunakan border-radius: 9999px atau 500px menjamin tombol selalu melengkung sempurna tanpa peduli seberapa panjang teks di dalamnya.
🌊 Animasi Morphing dengan CSS Bentuk blob 8-value sangat mudah dianimasikan dengan CSS keyframes transition border-radius untuk efek dinamis yang memikat mata.
⚡ Dukungan Semua Browser Sintaks Fancy 8-value didukung 100% oleh semua browser modern (Chrome, Safari, Firefox, Edge) tanpa memerlukan vendor-prefix lama seperti -webkit-.
Dwi Kurniawan, S.E.
Dwi Kurniawan, S.E. ✓ Verified Author & Developer
Industrial Technologist & Praktisi K3 · Pengembang Dwik.web.id

💡 Cerita di Balik Pembuatan Alat Ini

🔗 Coba Juga Tools Lain

Tools ini cocok dipadukan dengan kalkulator lainnya:

🌗 Box Shadow Generator
Elevasi bayangan berlapis 🪟 Glassmorphism Generator
Efek blur frosted glass 🎨 Color Contrast Checker
Uji aksesibilitas warna

🔗 Alat Terkait yang Mungkin Anda Butuhkan

🎨 Color Palette Generator 📦 CSS Box Shadow Generator 🌊 Tailwind to CSS Converter 🪟 Glassmorphism Generator 📐 CSS Grid Generator 🎨 CSS Gradient Generator
🕐 Terakhir diperbarui: 10 Oktober 2026 · Dibuat oleh dwik.web.id · Syarat & Ketentuan

🔖 Daftar Bacaan