Generator Border Radius CSS
Pratinjau Radius Batas
Kode CSS
.element {
border-radius: 20px;
}
? Pertanyaan yang Sering Diajukan
Bagaimana cara kerja border-radius?
Border-radius membulatkan sudut elemen. Nilainya dapat berupa piksel, persentase, atau em. Anda dapat menentukan semua sudut sekaligus (border-radius: 10px) atau setiap sudut secara individual (kiri atas, kanan atas, kanan bawah, kiri bawah).
Bisakah saya membuat sudut membulat berbentuk elips?
Ya! Gunakan dua nilai yang dipisahkan oleh garis miring: border-radius: 50px / 25px. Nilai pertama adalah radius horizontal, nilai kedua adalah radius vertikal, sehingga menciptakan kurva elips, bukan kurva melingkar.
Bagaimana cara membuat lingkaran sempurna?
Atur border-radius: 50% pada elemen persegi. Persentase tersebut relatif terhadap dimensi elemen, jadi 50% pada persegi akan menghasilkan lingkaran. Untuk persegi panjang, gunakan nilai piksel yang lebih besar sebagai gantinya.
Apakah setiap sudut dapat memiliki nilai radius yang berbeda?
Tentu! Anda dapat menentukan nilai yang berbeda untuk setiap sudut: border-radius: 10px 20px 30px 40px (kiri atas, kanan atas, kanan bawah, kiri bawah) atau menggunakan properti individual seperti border-top-left-radius.
Apakah ini berfungsi dengan border dan padding?
Ya, border-radius berinteraksi dengan border dan padding. Tepi luar mengikuti border, sedangkan tepi dalam menyesuaikan dengan padding. Pratinjau visual membantu Anda melihat bagaimana properti-properti ini berpadu.
Apakah data saya aman dan terlindungi?
Ya, tentu saja! Alat ini berjalan sepenuhnya di browser Anda. Semua pemrosesan data terjadi secara lokal di perangkat Anda - tidak ada yang diunggah ke server kami. File dan data Anda tidak pernah meninggalkan komputer Anda, sehingga menjamin privasi dan keamanan sepenuhnya.