Generator Border Radius

Cara menggunakan generator border radius

1. Seret titik-titik di tepi pratinjau. Setiap titik berwarna mengatur radius horizontal sebuah sudut; jika Sudut elips (8 nilai) dicentang, titik putih mengatur radius vertikalnya.
2. Atau ketik nilai yang tepat di Sudut: Kiri atas, Kanan atas, Kanan bawah, dan Kiri bawah, masing-masing dengan kolom Horizontal dan Vertikal.
3. Pilih Satuan: % (persen dari kotak) atau px (piksel). Saat Anda beralih, nilai yang ada dikonversi sehingga bentuknya tetap sama.
4. Atur Lebar kotak (px) dan Tinggi kotak (px) sesuai elemen Anda, lalu gunakan Semua sudut untuk membulatkan semua sudut sekaligus.
5. Coba Preset (Membulat, Pil, Lingkaran, Daun, Tetesan, Telur, Tiket, dan tiga blob) atau klik Blob acak untuk bentuk organik.
6. Centang Properti longhand jika Anda lebih suka empat deklarasi border-*-radius, lalu salin Kode CSS dengan tombol Salin.

Keyboard: fokuskan sebuah titik dan tekan tombol panah untuk mengubah radiusnya satu langkah (10 langkah dengan Shift).

Sintaks border-radius

border-radius menerima satu sampai empat nilai, dengan urutan kiri atas, kanan atas, kanan bawah, kiri bawah. Seperti margin, nilai yang tidak ditulis disalin dari sudut yang berseberangan: border-radius: 10px 20px membulatkan kiri atas dan kanan bawah sebesar 10px, dan dua sudut lainnya sebesar 20px. Alat ini selalu menulis bentuk setara yang paling pendek.

Setiap sudut sebenarnya adalah seperempat elips dengan dua radius. Garis miring memisahkan radius horizontal dari radius vertikal, sehingga Anda bisa memakai hingga delapan nilai:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Sebelum garis miring: radius horizontal keempat sudut. Sesudahnya: radius vertikal. Jika kedua daftar sama, bagian setelah garis miring dihilangkan.

Piksel atau persen?

• px menghasilkan lengkungan yang sama berapa pun ukuran elemennya. Ini pilihan tepat untuk tombol, kartu, dan kolom input: border-radius: 8px.
• % relatif terhadap elemen: radius horizontal terhadap lebarnya, radius vertikal terhadap tingginya. 50% mengubah persegi menjadi lingkaran dan persegi panjang menjadi elips. Persenlah yang membuat bentuk blob ikut menyesuaikan ukuran elemen.

Untuk tombol berbentuk pil, gunakan radius piksel minimal setengah dari tingginya. Preset Pil melakukan hal itu untuk ukuran kotak yang Anda masukkan; nilai besar seperti 999px juga berfungsi.

Jika jumlah radius yang bersebelahan melebihi panjang sisi yang mereka bagi, browser mengecilkan semua radius secara proporsional hingga muat. Karena itulah bentuknya tidak rusak saat Anda menyeret dua titik hingga saling melewati.

Bentuk blob

Preset blob dan Blob acak menggunakan delapan nilai persen dengan dua titik di setiap sisi berjumlah 100%. Lengkungannya pun bertemu dengan pas dan bentuknya tampak seperti kerikil yang halus. Animasikan perpindahan antara dua blob dengan transition CSS pada border-radius untuk efek “morphing”.