Pembuat radius sudut
Buat properti CSS border-radius
Input & opsi
Preset cepat & contoh
Berjalan di browser Anda. Input Anda tetap berada di perangkat ini.
Hasil
Masukkan nilai Anda untuk melihat hasilnya.
Tentang Pembuat radius sudut
Alat pembuat radius sudut CSS gratis kami memberi Anda kendali visual penuh atas sudut membulat pada elemen HTML apa pun. Atur setiap sudut secara terpisah atau tautkan semuanya, pilih dari beberapa satuan (px, %, em, rem), dan lihat hasilnya langsung di panel pratinjau.
Sudut membulat adalah bagian mendasar dari desain web modern. Dari pembulatan halus 4px pada kartu dan kolom input hingga lingkaran 50% penuh untuk avatar, properti border-radius membentuk cara pengguna memandang antarmuka Anda. Alat ini memudahkan Anda menemukan nilai yang tepat tanpa menebak-nebak atau terus memuat ulang browser.
Pembuat ini menyediakan 10 bentuk preset seperti Persegi, Lingkaran, Pil, Tetesan, dan Organik, ditambah pembuat acak untuk eksplorasi kreatif. Hasilnya tersedia dalam berbagai format, termasuk CSS shorthand, properti sudut individual, kelas CSS siap pakai, dan padanan perkiraan Tailwind CSS.
Fitur utama
- Kontrol independen untuk setiap sudut: kiri atas, kanan atas, kanan bawah, dan kiri bawah
- Tombol tautkan sudut untuk menyesuaikan radius yang seragam di keempat sudut
- Empat pilihan satuan: piksel (px), persentase (%), em, dan rem untuk desain responsif
- Pratinjau real-time dengan ukuran elemen yang dapat diatur (100-300px) dan pemilih warna kustom
- 10 bentuk preset: Persegi, Membulat, Lingkaran, Pil, Atas Membulat, Bawah Membulat, Kiri Membulat, Kanan Membulat, Tetesan, dan Organik
- Indikator nilai sudut visual yang menampilkan radius tepat di setiap sudut
- Pembuat radius acak untuk inspirasi dan eksperimen kreatif
- Beragam format keluaran CSS: shorthand, properti individual, kelas CSS, dan perkiraan Tailwind CSS
- Salin ke clipboard sekali klik untuk langsung dipakai di proyek Anda
- Kontrol slider dengan tampilan rentang untuk penyesuaian nilai yang intuitif
Cara menggunakan Pembuat radius sudut
- Pilih satuan Anda: Pilih px untuk ukuran tetap, % untuk skala responsif, atau em/rem untuk ukuran berbasis tipografi.
- Atur nilai sudut: Gunakan slider untuk menentukan radius tiap sudut secara terpisah, atau aktifkan "Tautkan semua sudut" untuk pembulatan yang seragam.
- Coba bentuk preset: Klik salah satu dari 10 bentuk preset seperti Lingkaran, Pil, atau Tetesan untuk langsung menerapkan konfigurasi umum.
- Lihat pratinjau hasil: Lihat pratinjau langsung dengan ukuran dan warna yang dapat diatur untuk melihat persis tampilan border radius Anda.
- Salin CSS-nya: Klik Salin untuk mengambil kode CSS border-radius, atau gunakan bagian format alternatif untuk properti individual atau kelas Tailwind.
Kasus penggunaan
- Penataan tombol: Buat tombol berbentuk pil, tombol ajakan bertindak dengan sudut sedikit membulat, atau tombol ikon yang benar-benar bulat.
- Komponen kartu: Terapkan sudut membulat yang konsisten pada kartu, modal, dan kotak dialog di sistem desain Anda.
- Gambar avatar: Gunakan border-radius 50% pada gambar persegi untuk membuat avatar pengguna dan foto profil yang bulat sempurna.
- Kolom input: Beri pembulatan halus pada input formulir, textarea, dan dropdown pilihan untuk tampilan yang modern.
- Elemen navigasi: Tata tab, badge, tag, dan item navigasi dengan pembulatan sudut yang sesuai.
- Bentuk kreatif: Gabungkan nilai sudut asimetris untuk membuat gumpalan organik, tetesan, dan elemen dekoratif yang unik.
- Desain tooltip dan popover: Terapkan pembulatan sudut yang presisi pada tooltip, popover, dan menu dropdown.
- Token desain responsif: Tetapkan nilai border-radius yang konsisten di seluruh proyek Anda menggunakan satuan em atau rem.
Pertanyaan yang sering diajukan
Apakah alat ini gratis?
Ya, Pembuat radius sudut sepenuhnya gratis tanpa batasan. Anda dapat memakainya sebanyak yang Anda mau tanpa registrasi atau pembayaran.
Apakah data saya aman?
Tentu. Alat ini berjalan sepenuhnya di browser Anda. Tidak ada data yang dikirim ke server mana pun, sehingga pengaturan dan kode CSS yang Anda hasilkan tetap privat di perangkat Anda.
Apa perbedaan px dan % untuk border-radius?
Nilai piksel (px) menghasilkan radius tetap berapa pun ukuran elemennya. Nilai persentase (%) bersifat relatif terhadap dimensi elemen sehingga responsif. Misalnya, 50% pada elemen persegi menghasilkan lingkaran yang sempurna.
Bagaimana cara membuat lingkaran sempurna dengan CSS?
Atur border-radius ke 50% pada elemen dengan lebar dan tinggi yang sama. Preset Lingkaran di alat ini menerapkan konfigurasi persis seperti itu.
Apakah border-radius didukung di semua browser?
Ya, properti CSS border-radius didukung penuh di semua browser modern, termasuk Chrome, Firefox, Safari, Edge, dan Opera. Awalan vendor tidak diperlukan.
Tips & praktik terbaik
- Gunakan nilai yang konsisten: Tetapkan 2-3 nilai border-radius standar di sistem desain Anda (misalnya 4px, 8px, 16px) demi konsistensi visual.
- Gunakan persentase untuk lingkaran: Atur 50% pada elemen persegi agar menjadi lingkaran sempurna yang otomatis menyesuaikan saat ukurannya berubah.
- Buat halus untuk formulir: Nilai kecil (2-8px) paling cocok untuk kolom input dan elemen formulir agar tampilannya tetap bersih dan profesional.
- Coba sudut asimetris: Nilai berbeda di tiap sudut menghasilkan bentuk unik yang dapat memberi karakter pada elemen dekoratif.
- Pertimbangkan satuan responsif: Gunakan em atau rem untuk nilai border-radius yang berskala proporsional dengan tipografi Anda.
- Uji dengan konten: Selalu periksa tampilan sudut membulat dengan konten asli di dalam elemen, terutama pada ukuran viewport yang berbeda.