Generator CSS Border Radius
Buat CSS border-radius dengan sudut independen, radius X/Y elips, satuan px atau %, dan preset blob. Menghasilkan shorthand valid yang paling ringkas.
Preset
Sudut
Pengaturan pratinjau
Pratinjau
border-radius: 16px;
Alat Terkait
Lihat SemuaApa itu Generator Border Radius?
Atur radius setiap sudut secara terpisah, opsional dengan radius horizontal dan vertikal yang berbeda untuk sudut elips, dalam px atau %. Alat ini menampilkan pratinjau bentuknya dan menulis shorthand border-radius setara yang paling ringkas.
Cara menggunakan Generator Border Radius
- Pilih preset (Membulat, Pil, Lingkaran, Gumpalan, Daun, Tiket) atau atur nilainya sendiri.
- Pilih Satuan (px atau %) dan aktifkan Sudut elips (X/Y terpisah) jika Anda ingin radius X/Y terpisah.
- Sesuaikan setiap sudut (Kiri atas, Kanan atas, Kanan bawah, Kiri bawah); centang Tautkan semua sudut untuk mengubahnya bersamaan.
- Ubah lebar, tinggi, dan warna di Pengaturan pratinjau untuk melihat bentuk pada ukuran Anda.
- Salin kode CSS-nya.
Contoh
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Kapan menggunakan Generator Border Radius
Gunakan untuk kartu membulat, pil, avatar, dan bentuk blob organik yang dibuat murni dengan CSS. Persentase menyesuaikan dengan elemen (50% pada persegi menghasilkan lingkaran). Untuk poligon sembarang atau bentuk dengan potongan lurus, gunakan Generator Clip Path; untuk bentuk organik kompleks dengan banyak titik, gunakan Generator SVG Blob.
Cara kerja Generator Border Radius
Sudut diurutkan kiri atas, kanan atas, kanan bawah, kiri bawah, sesuai ketentuan CSS. Setiap kelompok empat nilai diringkas dengan aturan shorthand standar: nilai keempat dibuang jika sama dengan yang kedua, yang ketiga jika sama dengan yang pertama, dan yang kedua jika sama dengan yang pertama. Dengan sudut elips, radius vertikal ditulis setelah garis miring (h / v); bagian setelah garis miring dihilangkan jika setiap radius vertikal sama dengan radius horizontalnya.
Kasus Penggunaan Umum
- Tombol dan tag berbentuk pil
- Avatar bundar
- Gambar blob organik dengan radius elips 8 nilai
- Kartu berbentuk tiket atau daun
- Sudut balon obrolan yang asimetris
Pertanyaan Umum
Apa arti garis miring pada border-radius?
Nilai sebelum garis miring adalah radius horizontal dan nilai sesudahnya adalah radius vertikal, yang menghasilkan sudut elips.
Mengapa 999px menghasilkan bentuk pil?
Jika radius lebih besar dari kotaknya, browser memperkecil semuanya secara proporsional, sehingga nilai yang sangat besar selalu menghasilkan ujung yang bulat sempurna.
Sebaiknya pakai px atau %?
px menjaga lengkungan yang sama di ukuran apa pun; % relatif terhadap lebar (horizontal) dan tinggi (vertikal) elemen, yang memang Anda inginkan untuk lingkaran dan blob.