Penghasil Border Radius
CSS Border Radius Generator mengatur border-radius setiap sudut elemen dalam persen lewat slider terpisah atau satu slider All Corners, dilengkapi preset seperti circle, leaf, dan blob, lalu menyalin CSS-nya.
Tentang alat ini
CSS Border Radius Generator mengatur border-radius setiap sudut elemen dalam persen lewat slider terpisah atau satu slider All Corners, dilengkapi preset seperti circle, leaf, dan blob, lalu menyalin CSS-nya.
Cara menggunakan
- Geser slider untuk setiap sudut, atau gunakan All Corners.
- Coba preset seperti Circle, Leaf, atau Blob.
- Ubah ukuran pratinjau jika perlu.
- Klik Copy CSS.
Perlu diketahui
- border-radius menerima hingga empat nilai dengan urutan kiri-atas, kanan-atas, kanan-bawah, kiri-bawah.
- border-radius: 50% pada elemen persegi menghasilkan lingkaran.
- Radius dalam persen ikut menyesuaikan ukuran elemen; radius dalam piksel tetap.
- Radius yang tidak sama pada sudut yang berseberangan menghasilkan bentuk daun dan blob tanpa SVG.
- border-radius didukung di semua browser saat ini tanpa prefix.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara membuat sudut membulat di CSS?
Atur border-radius, misalnya border-radius: 12px; untuk semua sudut, atau empat nilai untuk masing-masing sudut.
Bagaimana cara membuat lingkaran dengan CSS?
Beri elemen lebar dan tinggi yang sama serta border-radius: 50%.
Bagaimana urutan empat nilai border-radius?
Kiri-atas, kanan-atas, kanan-bawah, kiri-bawah — searah jarum jam dimulai dari sudut kiri atas.
Sebaiknya border-radius memakai px atau %?
Gunakan px untuk ukuran sudut yang konsisten pada tombol dan kartu; gunakan % untuk bentuk seperti lingkaran dan blob yang ikut menyesuaikan ukuran elemen.