Pembuat sudut membulat & bentuk
Sesuaikan jari-jari horizontal dan vertikal dari keempat sudut dalam px atau %, lalu pratinjau bentuknya. Salin atau simpan CSS border-radius yang dibuat. Lebar, tinggi, dan warna pada pratinjau tidak disertakan dalam CSS.
Yang dapat Anda lakukan
Sesuaikan pembulatan dari sebuah preset
Pilih dari 8 preset, termasuk sudut membulat, kapsul, dan daun, lalu sesuaikan radius. Memilih preset akan mengganti radius dan satuan.
Berikan pembulatan berbeda pada keempat sudut
Matikan pengaturan radius yang sama untuk memasukkan radius horizontal dan vertikal sudut kiri atas, kanan atas, kanan bawah, dan kiri bawah secara terpisah.
Periksa dan dapatkan CSS-nya
Buat CSS setelah memeriksa bentuk. Beralih antara deklarasi singkat dan deklarasi per sudut, lalu salin atau simpan sebagai berkas CSS.
Cara penggunaan
Pilih preset dan satuan
Masukkan radius langsung, atau pilih preset untuk mulai menyesuaikannya. Mengubah satuan tidak mengubah angka.
Bandingkan pembulatan dan bentuk
Masukkan satu nilai untuk memakai radius yang sama. Untuk membuatnya berbeda per sudut, hapus centang opsi tersebut dan sesuaikan nilai horizontal serta vertikal.
Periksa ukuran bila perlu
Pada pengaturan pratinjau, Anda dapat mengubah lebar, tinggi, dan warna pratinjau. Ketiganya tidak disertakan dalam CSS keluaran.
Buat CSS, lalu salin atau simpan
Tekan “Buat CSS” dan pilih format yang Anda inginkan. Jika mengubah radius, satuan, atau ukuran, buat lagi.
Berguna ketika
Bentuk sudut kartu dan tombol
Saat ingin membuat CSS untuk komponen halaman dengan membulatkan keempat sudut secara sama atau hanya sudut atas.
Buat latar membulat asimetris
Saat ingin mengubah pembulatan horizontal dan vertikal per sudut untuk membuat garis luar menyerupai daun atau bentuk organik.
Hubungan antara radius, satuan, dan ukuran tampilan
Horizontal dan vertikal adalah dua arah dari sudut yang sama
Radius horizontal mengatur pembulatan horizontal, dan radius vertikal mengatur pembulatan vertikal. Sebuah sudut tidak membulat jika salah satu nilainya 0. Tentukan keempat sudut searah jarum jam mulai dari kiri atas.
% memakai lebar dan tinggi sebagai acuan terpisah
Nilai % horizontal relatif terhadap lebar elemen, dan nilai % vertikal relatif terhadap tingginya. Meskipun angkanya sama, persegi dan persegi panjang yang tinggi atau lebar terlihat berbeda. px menentukan panjang secara langsung.
Radius yang terlalu besar menyusut dengan proporsi yang sama
Jika jumlah radius yang bersebelahan melebihi panjang sisi, seluruh 8 radius tampilan dikurangi dengan faktor yang sama. Nilai masukan dan CSS yang dihasilkan tetap tidak berubah. Pada rincian setelah pembuatan, Anda dapat memeriksa radius yang dipakai untuk pratinjau.
Ragam bentuk yang dapat dinyatakan dengan sudut membulat
border-radius mengubah sudut menjadi lengkung elips. Alat ini tidak dapat membuat lekukan atau poligon sembarang. Preset squircle mendekati bentuk dengan sudut elips; preset ini tidak mereproduksi kurva matematisnya secara persis.
Pertanyaan yang sering diajukan
Bisakah saya mengatur pembulatan berbeda untuk tiap sudut?
Ya. Hapus centang “Gunakan radius yang sama untuk semua sudut” untuk memasukkan radius horizontal dan vertikal tiap sudut secara terpisah. Memcentangnya lagi akan menyamakan semua radius dengan radius horizontal sudut kiri atas.
Apakah angka dikonversi saat saya berganti satuan?
Tidak. Angka tetap dipertahankan dan hanya satuannya yang berubah. Jika setelah berganti dari px ke % masih ada nilai di atas 100, masukkan lagi dalam rentang 0–100.
Apakah ukuran dan warna pada pratinjau disertakan dalam CSS?
Tidak. Keluaran hanya berisi deklarasi border-radius. Atur lebar, tinggi, dan warna latar di halaman atau komponen tempat Anda menggunakannya.
Mengapa sudut yang ditampilkan lebih kecil dari radius yang saya masukkan?
Peramban mengurangi radius tampilan dengan proporsi yang sama agar lengkung sudut tidak saling tumpang tindih. Anda dapat memeriksa faktor pengurangan dan nilai px untuk tiap sudut di “Radius yang dipakai untuk tampilan”.
Input dan hasil
- Radius
- Tentukan semua 8 nilai dalam satuan yang sama: 0–100% atau 0–9999px. Nilai desimal juga diterima.
- Pratinjau
- Lebar dan tinggi pratinjau adalah bilangan bulat dari 1–400px. Lebar yang tidak muat dapat digulir secara horizontal di dalam kolom.
- Keluaran
- border-radius singkat atau deklarasi untuk tiap dari 4 sudut. Salin atau simpan border-radius.css.
- Tidak disertakan
- Lebar, tinggi, warna latar, serta ekspor gambar atau SVG.