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

Generator Tupai CSS — Kotak Bulat

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 sebesar 30%, pembulatan sedang yang berada di antara kotak tajam dan lingkaran penuh. Ini bukanlah sebuah tupai matematis yang sebenarnya (superellipse), tapi ini adalah properti CSS yang paling mendekati yang bisa didapatkan, dan ini adalah nilai yang paling banyak dicapai oleh sistem desain ketika mereka menginginkan tampilan tersebut.

Nama ini berasal dari ikon aplikasi persegi bulat yang dipopulerkan oleh iOS: lengkungan yang cukup di setiap sudutnya agar terasa lembut dan bersahabat, namun tidak terlalu menonjol sehingga bentuknya terlihat bulat. Ubin ikon, thumbnail kartu, dan bingkai avatar modern semuanya bersandar pada jari-jari dalam rentang kasar yang sama karena alasan tersebut.

Geser penggeser yang tertaut ke atas untuk mendapatkan kesan yang lebih lembut dan melingkar, atau ke bawah untuk mendapatkan kesan yang lebih tajam dan persegi — garis CSS diperbarui setiap ada perubahan, siap untuk disalin setelah kurva terasa pas untuk ikon atau kartu Anda.

🛡️
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.