Generator border-radius CSS
Sesuaikan kedelapan nilai sudut border-radius, termasuk radius horizontal dan vertikal elips, lihat pratinjau kotak secara langsung, dan salin CSS singkatnya.
Generator border-radius CSS — Atur setiap sudut kotak secara independen — kiri atas, kanan atas, kanan bawah, dan kiri bawah — dengan radius horizontal dan vertikal terpisah untuk kurva elips yang sebenarnya, dan saksikan pratinjau langsung diperbarui sementara CSS border-radius singkat dibuat untuk Anda. Semuanya berjalan secara lokal di browser Anda, jadi tidak ada nilai yang keluar dari perangkat Anda. Salin hasilnya dan tempel langsung ke lembar gaya Anda.
Apa itu Generator border-radius CSS?
Generator border-radius CSS adalah editor visual gratis untuk properti CSS border-radius, dibuat untuk pengembang front-end dan desainer. Gunakan penggeser rentang dan kolom angka untuk mengatur radius horizontal dan vertikal setiap sudut dalam piksel, pilih satuan, dan aktifkan mode elips untuk mendapatkan sintaks garis miring sudut oval. Kotak pratinjau menampilkan bentuk membulat secara real-time, dan deklarasi singkat yang ringkas dibuat untuk Anda salin. Pilih praset seperti Membulat, Pil, Lingkaran, atau Blob organik dari kontrol tersegmentasi untuk memulai cepat, lalu sempurnakan setiap sudut. Gunakan untuk mendesain kartu lembut, tombol pil, lingkaran sempurna, squircle, dan bentuk dekoratif menyerupai tetesan tanpa menghafal urutan sudut.
Cara menggunakan Generator border-radius CSS
- Pilih praset (Membulat, Pil, Lingkaran, atau Blob) dari kontrol tersegmentasi untuk memuat bentuk awal.
- Seret penggeser rentang setiap sudut atau ketik angka untuk mengatur radius horizontal sudut tersebut.
- Aktifkan Elips untuk menampilkan radius vertikal kedua per sudut dan menghasilkan sudut oval dengan sintaks garis miring.
- Pilih satuan (px atau %) di pengaturan; persentase menskalakan radius mengikuti ukuran kotak.
- Saksikan pratinjau langsung diperbarui, lalu salin border-radius singkat yang dihasilkan ke lembar gaya Anda.
Contoh
Sudut kartu yang lembut
Masukan
Keempat sudut 16, elips nonaktif
Keluaran
border-radius: 16px;
Tombol pil
Masukan
Praset Pil, semua sudut 9999
Keluaran
border-radius: 9999px;
Sudut elips campuran
Masukan
KiA 40/20, KaA 10, KaB 40/20, KiB 10, elips aktif
Keluaran
border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;
Pertanyaan yang sering diajukan
- Bagaimana urutan keempat sudutnya?
- Bentuk singkat mencantumkan sudut searah jarum jam mulai dari kiri atas: kiri atas, kanan atas, kanan bawah, kiri bawah. Alat ini selalu menampilkan keempat nilai dalam urutan tersebut, sehingga hasilnya tidak ambigu dan mudah disesuaikan secara manual setelahnya.
- Apa fungsi mode elips?
- Border-radius dapat menerima radius horizontal dan vertikal per sudut, dipisahkan oleh garis miring, untuk menggambar sudut oval (elips) alih-alih melingkar. Aktifkan Elips untuk mengatur radius vertikal kedua pada setiap sudut; keluarannya kemudian memakai sintaks garis miring 'horizontal / vertikal'.
- Sebaiknya pakai px atau persen?
- Piksel memberi ukuran sudut tetap, terlepas dari kotaknya. Persentase relatif terhadap lebar dan tinggi kotak, jadi 50% pada setiap sudut mengubah persegi menjadi lingkaran sempurna dan pembulatannya menskala saat elemen diubah ukurannya. Ganti satuan di pengaturan.
- Bagaimana membuat lingkaran sempurna atau pil?
- Pilih praset Lingkaran (50% pada setiap sudut) untuk lingkaran dari persegi, atau praset Pil (radius piksel yang sangat besar) agar sisi pendek menjadi setengah lingkaran penuh. Anda juga bisa mulai dari praset dan menyempurnakan sudut tertentu.
- Apakah data saya diunggah ke suatu tempat?
- Tidak. Generator ini berjalan sepenuhnya di browser Anda dengan JavaScript — nilai radius Anda tidak pernah dikirim ke server, jadi bekerja secara privat dan bahkan offline setelah halaman dimuat.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi kartu PNG yang rapi dengan penyorotan sintaksis di browser Anda, dengan tema, latar gradien atau transparan, dan padding — tanpa unggah.
Pemeriksa Kontras Warna
Periksa rasio kontras WCAG antara warna HEX latar depan dan latar belakang serta lihat apakah lolos AA dan AAA untuk teks normal maupun besar.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala gradasi 50-950 bergaya Tailwind, dicampur ke arah putih dan hitam, setiap langkah dengan sampel dan HEX yang bisa disalin.