Konverter warna
Konversi HEX, RGB, dan HSL beserta transparansi, lihat contoh warna, dan salin nilai CSS.
Pembuat sudut membulat CSS
Atur empat sudut secara serentak atau terpisah, pratinjau sudut elips, lalu ekspor border-radius.
Sudut elips
Pratinjau
CSS
Tentang alat ini
Bandingkan sudut lingkaran dan elips untuk tombol, kartu, atau lencana.
Cara menggunakan
Pilih px atau %, kemudian geser pengatur atau masukkan radius tiap sudut. Semua sudut awalnya terhubung; lepaskan hubungan untuk mengedit satu per satu. Pada pengaturan elips, aktifkan radius vertikal terpisah untuk membedakan lengkungan horizontal dan vertikal.
Rentang nilai 0–500 px atau 0–100%. Pratinjau dan deklarasi CSS yang disalin atau diunduh memakai angka yang sama. Persentase bergantung pada ukuran elemen. Mengganti satuan mengubah arti angka, bukan mengonversinya agar ukuran visual selalu tetap sama.
Pertanyaan umum
Apa arti garis miring pada border-radius?
Sebelumnya adalah radius horizontal, sesudahnya radius vertikal. CSS mengecilkan radius yang bertumpang tindih secara proporsional agar muat dalam kotak.
Mengapa radius 50% menghasilkan oval, bukan lingkaran?
Radius persentase dihitung dari lebar dan tinggi elemen masing-masing. Kotak persegi panjang dengan radius 50% menjadi elips; lingkaran membutuhkan lebar dan tinggi yang sama. Gunakan px untuk kelengkungan tetap, lalu periksa hasilnya pada ukuran elemen yang sebenarnya.
Alat terkait
Dibuka di tab baru
Komentar
0