Alat saya

Generator border-radius CSS

Geser penggeser atau pilih preset — lihat bentuknya langsung dan salin CSS border-radius dengan satu klik.

Mode
Satuan
Preset
Pratinjau — bila radius yang berdekatan tumpang tindih, peramban mengecilkannya secara proporsional, jadi pratinjau adalah hasil nyata.
Cara menggunakan
  1. Kartu membulat (16px) sudah tampil — geser penggeser Radius atau ganti satuan (px / %) dan semuanya diperbarui langsung, tanpa tombol yang perlu ditekan.
  2. Ganti mode lewat chip: “Semua sudut” menggerakkan satu penggeser, “Per sudut” mengedit keempat sudut secara terpisah (kiri atas, kanan atas, kanan bawah, kiri bawah), “Elips” menambahkan radius horizontal dan vertikal per sudut (sintaks garis miring).
  3. Klik preset (Tajam, Kartu membulat, Lingkaran, Pil, Daun, Blob) untuk memuat bentuk siap pakai — mode dan satuan mengikuti otomatis. Salin deklarasi border-radius lengkap dengan satu klik.
Contoh
Preset
Kartu membulat
CSS border-radius
border-radius: 16px;
Preset Daun (per sudut, 0 / 50% / 0 / 50%) menyusut menjadi border-radius: 0% 50%; dan preset Blob menghasilkan bentuk elips border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. Setiap kali sudutnya saling mencerminkan, bentuk singkat yang lebih pendek dipakai — persis seperti aturan shorthand CSS.
Cakupan, batasan, dan pertanyaan umum
  • Hanya border-radius: tanpa sudut halus/berkelanjutan gaya iOS (squircle) — itu perlu clip-path atau SVG dan di luar cakupan.
  • Tidak ada penempelan nilai CSS yang sudah ada: setiap nilai berasal dari penggeser, preset, dan chip mode, jadi tidak ada yang salah diurai.
  • Bila radius yang berdekatan berjumlah lebih dari satu sisi, peramban mengecilkannya secara proporsional. Pratinjau adalah hasil render nyata; kotak kode menampilkan nilai yang Anda atur.
  • Preset Pil menghasilkan 9999px — bentuk singkat komunitas untuk “semembulat mungkin”; peramban membatasinya ke setengah sisi yang lebih pendek.
  • Persentase diukur per sumbu: radius horizontal terhadap lebar, radius vertikal terhadap tinggi (pratinjaunya persegi, jadi keduanya terbaca sama di sana). Pada ukuran elemen lain, persentase yang sama membentuk sudut berbeda.
  • Tidak ada yang disimpan atau dibagikan lewat parameter di tautan: muat ulang dan Anda kembali ke Kartu membulat bawaan. Semuanya berjalan di peramban Anda.
Bila perlu menata kotaknya sedikit lebih jauh.
Generator box-shadow CSS
Generator gradien CSS