Generator CSS Border Radius Buat nilai border-radius CSS dengan kontrol per-sudut dan pratinjau visual.

🎨

Generator CSS Border Radius

Buat nilai border-radius CSS dengan kontrol per-sudut dan pratinjau visual.

Pilih sudut yang terhubung atau individu

Alihkan antara mengontrol semua sudut bersama-sama atau secara mandiri.

Sesuaikan radius

Gunakan penggeser untuk menetapkan nilai border-radius untuk setiap sudut.

Salin CSS

Pratinjau bentuk dan salin properti border-radius CSS yang dihasilkan.

Loading tool...

What Is Generator CSS Border Radius?

Generator Radius Batas CSS menyediakan kontrol visual atas properti border-radius, memungkinkan Anda untuk membuat sudut yang bulat pada elemen HTML apa pun. Anda dapat menghubungkan semua sudut untuk pembulatan seragam atau mengontrol setiap sudut secara independen untuk bentuk unik. Alat ini menawarkan pratinjau langsung yang diperbarui saat Anda menyesuaikan penggeser, menampilkan tepat bagaimana elemen Anda akan terlihat. Anda juga dapat menyesuaikan ukuran kotak pratinjau dan warna latar belakang. Radius batas adalah salah satu properti CSS paling umum digunakan dalam desain web modern, penting untuk membuat tombol yang bulat, kartu, avatar, dan elemen antarmuka pengguna lainnya. Properti singkat ini menerima satu hingga empat nilai untuk pembulatan seragam atau per sudut, dan alat ini menangani kedua kasus dengan toggle sederhana.

Why Use Generator CSS Border Radius?

Kontrol per-sudut atau pembulatan seragam dengan toggle sederhana
Pratinjau visual langsung dengan ukuran kotak dan warna yang dapat disesuaikan
Menghasilkan shorthand dan longhand CSS sesuai kebutuhan
Ideal untuk membuat lingkaran, pil, dan bentuk bulat kustom

Common Use Cases

Kartu Bulat

Buat komponen kartu yang seragam dengan sudut bulat untuk tata letak dasbor dan konten.

Tombol Berbentuk Pil

Desain tombol berbentuk pil atau kapsul dengan nilai border-radius tinggi.

Avatar Bulat

Buat lingkaran yang sempurna untuk avatar pengguna dengan menyetel radius ke 50%.

Bentuk Asimetris

Desain bentuk unik dengan nilai radius yang berbeda pada setiap sudut.

Technical Guide

Properti border-radius CSS adalah singkatan dari empat properti individual: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius. Ini menerima satu hingga empat nilai dalam urutan searah jarum jam mulai dari sudut kiri atas. Nilai tunggal diterapkan pada semua sudut. Dua nilai menetapkan top-kiri/bawah-kanan dan top-kanan/bawah-kiri. Tiga nilai menetapkan top-kiri, top-kanan/bawah-kiri, dan bawah-kanan. Empat nilai menetapkan setiap sudut secara individual. Nilai dapat dalam piksel, persentase, atau unit panjang CSS lainnya. Menyetel border-radius ke 50% pada elemen persegi menciptakan lingkaran yang sempurna. Properti ini juga dapat menerima dua set nilai dipisahkan oleh garis miring (/) untuk sudut elips, di mana set pertama mendefinisikan radius horizontal dan set kedua mendefinisikan radius vertikal. Border-radius bekerja pada elemen dengan batas yang terlihat, latar belakang, atau outline.

Tips & Best Practices

1
Gunakan 50% untuk membuat lingkaran yang sempurna pada elemen persegi
2
Nilai besar (9999px) membuat elemen berbentuk pil terlepas dari ukuran
3
Gabungkan nilai sudut yang berbeda untuk bentuk organik unik
4
Gunakan persentase untuk border-radius responsif yang sesuai dengan elemen

Related Tools

Pembuat Bayangan Kotak CSS

Buat bayangan kotak CSS dengan beberapa lapisan, opsi inset, dan pratinjau waktu nyata.

🎨 CSS & Design

Pembuat Tombol CSS

Desain tombol CSS kustom dengan warna, padding, border, bayangan, dan efek hover.

🎨 CSS & Design

Pembuat Kartu CSS

Buat desain kartu glassmorphic dengan pengaturan blur latar belakang, transparansi, dan bayangan.

🎨 CSS & Design

Pembuat Jalur Potong CSS

Buat bentuk jalur potong CSS dengan preset poligon, lingkaran, dan elips.

🎨 CSS & Design

Frequently Asked Questions

Q Bagaimana saya membuat lingkaran yang sempurna?

Setel border-radius ke 50% pada elemen persegi (lebar dan tinggi sama).

Q Bisakah saya menyetel nilai yang berbeda untuk setiap sudut?

Ya, hapus centang "Hubungkan semua sudut" untuk mengontrol setiap sudut secara mandiri.

Q Apa nilai maksimum border-radius?

Tidak ada batas maksimum, tetapi nilai yang lebih besar dari setengah ukuran elemen tidak memiliki efek tambahan.

Q Apakah border-radius mempengaruhi pemotongan konten?

Ya, konten termasuk latar belakang dan gambar akan dipotong ke bentuk bulat. Tambahkan overflow: hidden untuk elemen anak.

Q Bisakah saya menggunakan persentase sebagai ganti piksel?

Ya, persentase membuat radius relatif terhadap dimensi elemen, yang berguna untuk desain responsif.

About This Tool

Generator CSS Border Radius is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.