Generator Border Radius CSS
Buat nilai border-radius CSS yang kompleks secara visual. Kontrol independen untuk setiap sudut.
border-radius: 20px 20px 20px 20px;
Cara menggunakan alat ini
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Apa itu Generator Border Radius CSS?
Properti border-radius pada CSS menerima hingga empat nilai, satu per sudut, dalam urutan kiri atas, kanan atas, kanan bawah, dan kiri bawah. Gabungkan radius yang berbeda untuk membentuk bentuk organik seperti tetesan, kartu asimetris, atau gaya gelembung percakapan. Alat ini memungkinkan Anda menyesuaikan setiap sudut dengan penggeser dan melihat hasilnya secara real-time.
Kasus penggunaan umum
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Pertanyaan yang sering diajukan
Bagaimana dengan radius elips?▼
Alat terkait
Konverter Warna (HEX/RGB/HSL)
Konversikan warna antara format HEX, RGB, dan HSL. Pilih warna secara visual atau masukkan nilai secara manual.
Generator Box Shadow CSS
Buat nilai box-shadow CSS secara visual. Pratinjau secara real-time dan salin CSS yang dihasilkan.
Generator Gradien CSS
Buat gradien CSS linear dan radial. Pilih warna secara visual dan salin CSS yang dihasilkan.
Generator Kurva Easing Cubic Bezier
Buat kurva easing cubic-bezier untuk CSS. Termasuk preset standar.
Generator Palet Warna
Hasilkan palet warna yang harmonis dari warna dasar mana pun. Mendukung skema komplementer, analog, triadik, dan monokromatik.
Generator CSS Clamp()
Hasilkan nilai CSS yang fluid dan responsif dengan clamp(). Skalakan dengan mulus antara ukuran minimum dan maksimum di sepanjang rentang viewport.