⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator Lingkaran CSS — Radius Perbatasan 50%.

Rancang radius batas CSS secara visual: empat penggeser sudut independen dalam piksel atau persen, pintasan tautan semua sudut untuk lingkaran dan pil instan, ditambah mode gumpalan organik dengan bentuk acak.

12px
12px
12px
12px
Memproses... 0%

Hasil

Halaman ini membuka generator radius batas dengan keempat sudut terhubung dan disetel ke 50%, nilai yang mengubah kotak menjadi lingkaran hanya menggunakan CSS. Sejujurnya: pada kotak persegi ini menghasilkan lingkaran sempurna, tetapi pada kotak persegi panjang, 50% yang sama malah menghasilkan elips seperti stadion, karena setiap sudut hanya membulatkan seperempatnya.

Perbedaan tersebut penting karena 50% border-radius adalah satu-satunya cara paling umum untuk membuat avatar melingkar, lencana ikon, dan titik status di CSS — jauh lebih sederhana daripada memotong lingkaran dengan mask atau menggambar lingkaran di SVG, dan tetap tajam pada ukuran apa pun karena persentasenya relatif, bukan radius piksel tetap.

Alihkan kotak ke ukuran persegi tetap di CSS Anda sendiri untuk mengunci lingkaran yang sempurna, atau biarkan persegi panjang dengan sengaja agar bentuknya seperti pil — bagaimanapun juga, sudut-sudutnya tetap terhubung di sini sehingga satu penggeser menjaga keempatnya tetap sinkron saat Anda menyalin CSS yang dihasilkan.

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Mode sudut: penggeser radius kiri atas, kanan atas, kanan bawah, dan kiri bawah yang independen, masing-masing dapat dialihkan antara satuan piksel dan persen.
  • Kotak centang tautkan semua sudut yang mengarahkan setiap sudut dari satu penggeser, ditambah pratinjau kotak-kotak pada latar belakang terang atau gelap sehingga sudut yang terpotong tetap terlihat.
  • Mode gumpalan dengan tombol Acak yang membentuk bentuk sintaksis garis miring delapan nilai organik, ditampilkan besar dan siap disalin sebagai CSS.

Manfaat Utama

✓ Setiap penggeser memperbarui pratinjau langsung dan baris CSS secara instan, jadi Anda tidak perlu menebak seperti apa sebenarnya tampilan 12px 40% 8px 24%.
✓ Pintasan tautan-semua-sudut mengubah satu penggeser menjadi lingkaran, pil, atau tupai sempurna tanpa menyentuh tiga sudut lainnya dengan tangan.
✓ Mode blob menghasilkan bentuk acak organik dengan sintaks garis miring delapan nilai CSS — tampilan yang tidak akan pernah dapat dihasilkan oleh nilai radius batas tunggal.

Kasus Penggunaan

  • • Putar empat jari-jari sudut kartu secara terpisah — bulatkan hanya bagian atas panel tarik-turun atau hanya satu sisi tab.
  • • Tautkan keempat sudut ke satu penggeser untuk membuat lingkaran sempurna, tombol pil berbentuk stadion, atau tupai bergaya iOS dalam hitungan detik.
  • • Beralih ke mode blob dan tekan Acak hingga bentuk organik sesuai dengan ruang kosong di belakang gambar pahlawan atau avatar, lalu salin CSS.