Generator Border Radius CSS
Generator border-radius CSS visual. Sesuaikan setiap sudut secara independen dengan pratinjau real-time dan salin kode CSS secara instan.
Apa itu CSS border-radius?
CSS border-radius adalah properti yang membulatkan sudut batas luar elemen. Anda dapat mengatur setiap sudut secara independen menggunakan satu hingga empat nilai.
Bagaimana membuat lingkaran sempurna dengan border-radius?
Atur border-radius ke 50% pada elemen persegi (lebar dan tinggi sama). Untuk elips, gunakan border-radius: 50% pada elemen persegi panjang.
Unit apa yang bisa saya gunakan untuk border-radius?
Border-radius menerima px, %, em, rem, vw, vh dan unit panjang CSS lainnya. Persentase relatif terhadap dimensi elemen.
Apa sintaks singkat untuk border-radius?
Singkatan mengikuti pola: kiri-atas kanan-atas kanan-bawah kiri-bawah. Satu nilai berlaku untuk semua sudut. Dua nilai mengatur kiri-atas/kanan-bawah dan kanan-atas/kiri-bawah.
Bisakah saya membuat sudut elips?
Ya, menggunakan sintaks garis miring (/) Anda dapat menentukan radius horizontal dan vertikal terpisah. Misalnya border-radius: 50% / 100px.
Apakah border-radius bekerja di semua elemen?
Border-radius bekerja di sebagian besar elemen HTML termasuk div, button, img dan input. Namun mungkin tidak memotong konten overflow tanpa overflow: hidden.
Bisakah saya membuat bentuk kompleks dengan border-radius?
Ya, dengan menggabungkan nilai radius berbeda untuk setiap sudut, Anda dapat membuat pil, oval, daun, dan bentuk organik kustom.
Apakah border-radius didukung di semua browser?
Ya, border-radius didukung di semua browser modern termasuk Chrome, Firefox, Safari, Edge dan browser mobile.
Bagaimana membuat tombol berbentuk pil?
Atur border-radius ke nilai yang sama atau lebih besar dari setengah tinggi elemen. Untuk tombol setinggi 40px, gunakan border-radius: 20px atau lebih tinggi.
Apakah border-radius memengaruhi gambar latar belakang?
Ya, border-radius memotong latar belakang, gambar latar belakang dan batas elemen. Latar belakang secara otomatis mengikuti sudut membulat.
Bisakah saya menganimasikan border-radius?
Ya, border-radius dapat dianimasikan dengan transisi dan animasi CSS. Anda dapat bertransisi mulus antara nilai radius berbeda.
Bisakah saya menggunakan border-radius dengan transform CSS?
Ya, border-radius bekerja baik dengan transformasi CSS seperti rotate, scale dan translate.
Bagaimana membuat lingkaran dengan border?
Terapkan border-radius: 50% pada elemen persegi dengan lebar dan tinggi sama, lalu tambahkan properti border.
Apa perbedaan antara properti sudut individual dan singkatan?
Properti individual seperti border-top-left-radius memberi Anda kontrol presisi atas setiap sudut. Singkatan memungkinkan Anda mengatur beberapa sudut dalam satu deklarasi.
Cara Menggunakan Generator Border Radius CSS
Rancang sudut membulat secara visual dengan generator CSS border-radius ini. Semuanya berjalan lokal di browser Anda dan tidak ada data yang diunggah.
- Pilih px, %, em, atau rem pada menu tarik-turun Unit.
- Geser slider Top Left, Top Right, Bottom Right, dan Bottom Left untuk membulatkan setiap sudut secara terpisah.
- Aktifkan Link all corners untuk menerapkan satu nilai ke keempat sudut sekaligus.
- Salin CSS yang dihasilkan dari pratinjau lalu tempel ke stylesheet Anda.
Semua sudut 50% menghasilkan lingkaran atau kapsul sempurna; gunakan em atau rem agar radius mengikuti ukuran tipografi.
Alat Terkait
- Generator Box Shadow CSS Generator box-shadow CSS online gratis. Buat bayangan indah secara visual dengan offset, blur, spread, warna, dan inset yang dapat disesuaikan. Pratinjau langsung dan salin kode instan.
- Generator Gradien CSS Buat gradien CSS menakjubkan secara visual. Hasilkan gradien linear, radial dan konikal dengan beberapa color stop, sudut dan posisi kustom. Salin kode CSS siap produksi secara instan.
- Generator CSS Grid Generator CSS Grid visual gratis dengan pratinjau langsung. Desain tata letak grid responsif secara interaktif dan ekspor kode CSS siap produksi.
- Generator CSS Flexbox Generator CSS Flexbox visual dengan pratinjau langsung. Sesuaikan properti flex dan dapatkan kode CSS siap pakai.
- Generator Border Radius Kreatif Generator border radius kreatif gratis online. Seret 8 pegangan atau pilih prasetel blob untuk membuat bentuk CSS organik dan menyalin kodenya seketika.
- Konverter Warna Konverter warna online gratis. Konversi format HEX, RGB, HSL, HSV secara instan dengan pemilih visual. 100% pribadi, berjalan di browser Anda.
- Generator Easing CSS Generator easing CSS online gratis. Geser titik kendali cubic-bezier pada kurva interaktif, pilih dari 18 preset, lihat pratinjau bola berulang, dan salin fungsi timing seketika.
- Generator Text Shadow CSS Generator text-shadow CSS online gratis. Tumpuk beberapa lapisan bayangan dengan offset, blur, warna, dan opasitas, coba preset Neon, 3D, Retro, dan salin CSS-nya seketika.