Generator Radius Perbatasan
Hasilkan nilai radius batas CSS secara visual dengan generator radius batas gratis kami. Seret 8 pengendali sudut independen untuk membuat lingkaran, pil, gumpalan, dan bentuk bulat khusus - dapatkan hasil tulisan cepat dan tulisan panjang CSS yang siap disalin secara instan. Semua pemrosesan berjalan secara lokal di browser Anda. Tidak perlu mendaftar.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time - copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
Mengapa Menggunakan Generator Radius Perbatasan Kami?
- Pembuatan Radius Batas CSS Instan: Hasilkan nilai radius batas CSS secara visual dan dapatkan keluaran CSS yang siap disalin secara real-time. Generator radius perbatasan kami memperbarui pratinjau dan CSS pada setiap gerakan penggeser - tidak perlu menekan tombol, tidak perlu mendaftar.
- Generator Radius Perbatasan Aman Online: Semua pembuatan CSS dilakukan secara lokal di browser Anda menggunakan JavaScript. Konfigurasi desain Anda tidak pernah meninggalkan perangkat Anda, memastikan privasi 100% saat Anda menggunakan generator radius perbatasan kami secara online.
- Border Radius Generator Online - Tanpa Instalasi: Gunakan generator radius perbatasan kami langsung di browser Anda tanpa perlu mengunduh, plugin, atau Node.js. Hasilkan nilai radius batas CSS dari perangkat apa pun, kapan pun.
- Kontrol 8 Titik & 10 Preset Bentuk: Tetapkan jari-jari horizontal dan vertikal independen untuk keempat sudut (total 8 nilai) untuk membuat lingkaran, pil, gumpalan, daun, dan bentuk organik. Pilih dari 10 preset bawaan atau tautkan semua sudut untuk mengeditnya bersama-sama. Menghasilkan format variabel steno, tulisan panjang, dan CSS.
Kasus Penggunaan Umum untuk Generator Radius Perbatasan
- Desain Komponen UI: Pengembang frontend menggunakan generator radius perbatasan kami untuk mendesain sudut membulat untuk tombol, kartu, modals, dan kolom input. Seret pegangannya untuk menemukan radius sempurna dan salin CSS langsung ke stylesheet Anda.
- Token Sistem Desain: Insinyur sistem desain menggunakan generator radius perbatasan kami untuk menentukan token radius perbatasan yang konsisten. Output variabel CSS dipetakan langsung ke file token desain untuk Tailwind, token Figma, dan Kamus Gaya.
- Pembuatan Gumpalan & Bentuk Organik: Desainer menggunakan generator radius perbatasan kami untuk membuat bentuk gumpalan organik untuk bagian pahlawan, avatar, dan elemen dekoratif. Antarmuka 8 titik memungkinkan bentuk asimetris sepenuhnya yang tidak mungkin dihitung secara manual.
- Ikon Aplikasi & Bingkai Avatar: Pengembang seluler menggunakan generator radius perbatasan kami untuk membuat bentuk tupai yang digunakan untuk ikon aplikasi iOS dan ikon adaptif Android. Preset Squircle (30%) menghasilkan bentuk persegi bulat yang benar secara instan.
- Elemen Visual Laman Landas: Desainer pemasaran menggunakan generator radius batas kami untuk membuat CTA berbentuk pil, bingkai gambar bulat, dan bentuk dekoratif untuk laman landas. Preset Pill dan Blob sangat populer untuk halaman arahan SaaS modern.
- Mempelajari Radius Batas CSS: Pengembang yang mempelajari CSS menggunakan generator radius batas kami untuk memahami cara kerja sintaksis radius batas 8 nilai. Pratinjau langsung memperjelas bagaimana setiap nilai radius horizontal dan vertikal memengaruhi bentuk.
Memahami radius batas CSS
- Cara Kerja Generator Radius Perbatasan Kami: Klik salah satu dari 10 bentuk yang telah ditetapkan (Tajam, Bulat, Kartu, Lingkaran, Pil, Tupai, Gumpalan, Daun, Telur, Berlian) untuk langsung menerapkan bentuk awal. Atau mulai dari bentuk asimetris default dan sesuaikan penggeser secara manual.
- Seret 8 Pegangan Sudut: Setiap sudut memiliki dua penggeser - radius horizontal (X) dan vertikal (Y). Seret penggeser atau ketik nilai secara langsung. Alihkan "Tautkan semua sudut" untuk mengedit 8 nilai secara bersamaan. Beralih antara unit px dan % kapan saja.
- Salin CSS yang Dihasilkan: Generator radius batas menghasilkan empat format CSS secara real-time: tulisan singkat (radius batas), tulisan panjang (properti sudut individual), aturan CSS lengkap dengan pemilih, dan deklarasi variabel CSS. Klik tombol Salin apa pun untuk menyalin format yang Anda perlukan.
- Format Keluaran radius batas CSS: Ketika semua sudut sama, radius batas keluaran: 16 piksel. Ketika sudut berbeda tetapi X=Y, menghasilkan bentuk 4 nilai. Ketika X≠Y, menampilkan bentuk 8 nilai penuh dengan pemisah garis miring.
Pertanyaan yang Sering Diajukan
Generator radius batas adalah alat visual yang memungkinkan Anda menyetel nilai radius batas CSS dengan menyeret pegangan pada bentuk pratinjau dan mengeluarkan CSS yang siap disalin. Generator radius batas kami mendukung 8 nilai sudut individual (kiri atas-x, kiri atas-y, dll.) untuk bentuk yang sepenuhnya asimetris - tidak perlu mendaftar.
Generator radius batas mengeluarkan singkatan radius batas ketika semua sudut sama, atau sintaks 8 nilai penuh (radius-kiri-batas-atas,-radius-kanan-atas, radius-kanan-bawah-batas, radius-kiri-bawah-batas) ketika sudut-sudutnya berbeda. Ini juga menampilkan deklarasi variabel CSS untuk alur kerja token desain.
Sintaks 4 nilai (misalnya 20px 40px 20px 40px) menetapkan radius horizontal dan vertikal yang sama untuk setiap sudut. Sintaks 8 nilai (misalnya 20px 40px 20px 40px / 10px 20px 10px 20px) menetapkan jari-jari horizontal dan vertikal independen untuk setiap sudut, sehingga memungkinkan bentuk gumpalan elips dan organik.
Ya. Semua pembuatan CSS terjadi secara lokal di browser Anda menggunakan JavaScript. Tidak ada data yang dikirim ke server mana pun, memastikan privasi lengkap untuk pekerjaan desain Anda.
Ya! Generator radius perbatasan kami 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batasan penggunaan. Hasilkan nilai radius batas CSS untuk proyek apa pun langsung di browser Anda.
Ya. Dengan mengatur jari-jari horizontal dan vertikal yang berbeda untuk setiap sudut menggunakan antarmuka pegangan 8 titik, Anda dapat membuat bentuk gumpalan organik, bentuk pil, bentuk daun, dan bentuk bulat asimetris lainnya. Generator radius batas mengeluarkan sintaks CSS 8 nilai lengkap untuk bentuk ini.
Generator radius batas mencakup preset untuk bentuk umum: Lingkaran (50%), Pil (9999 piksel), Bulat (8 piksel), Kartu (16 piksel), Tupai (30%), Gumpalan (bentuk organik asimetris), Daun (asimetris), dan Tajam (0 piksel). Klik preset mana pun untuk langsung menerapkannya dan melihat keluaran CSS.
Ya. Generator radius batas menampilkan CSS yang dihasilkan dalam blok kode dengan tombol salin sekali klik. Anda juga dapat menyalin nilai properti individual atau aturan CSS lengkap termasuk pemilihnya.
Ya. Anda dapat beralih antara unit px dan % di generator radius batas. Nilai persentase relatif terhadap dimensi elemen - 50% membuat lingkaran untuk elemen persegi dan elips untuk elemen persegi panjang.