Pembuat Border Radius
Buat deklarasi CSS border-radius dari satu nilai bersama atau empat nilai sudut independen (atas-kiri, atas-kanan, bawah-kanan, bawah-kiri) dalam px, %, em, atau rem — disederhanakan menjadi shorthand yang paling singkat.
Input
Jika diaktifkan, nilai Atas Kiri diterapkan ke keempat sudut.
Output
Panduan
Apa itu border-radius?
border-radius adalah properti CSS yang membulatkan sudut kotak elemen. Satu nilai membulatkan setiap sudut secara merata; empat nilai membulatkan setiap sudut secara independen. Ini adalah salah satu properti yang paling banyak digunakan dalam desain web modern — tombol berbentuk pil, kartu yang dibulatkan, avatar melingkar, dan modal dengan sudut lembut semuanya bergantung pada satu deklarasi ini.
Urutan sudut
Ketika Anda menentukan empat nilai, CSS selalu menerapkannya dalam urutan yang sama, dimulai dari sudut atas-kiri dan bergerak searah jarum jam:
- Atas-kiri
- Atas-kanan
- Bawah-kanan
- Bawah-kiri
Jadi border-radius: 10px 20px 30px 40px; membulatkan sudut atas-kiri sebesar 10px, atas-kanan sebesar 20px, bawah-kanan sebesar 30px, dan bawah-kiri sebesar 40px. Alat ini mengikuti urutan yang sama persis, dan empat slider sudutnya diberi label untuk mencocokkan.
Cara menggunakan alat ini
- Biarkan Sama untuk semua sudut diaktifkan dan seret slider Atas Kiri untuk menetapkan satu radius untuk seluruh kotak — ini adalah kasus umum (tombol, kartu, avatar).
- Matikan Sama untuk semua sudut untuk mengungkap slider independen untuk masing-masing keempat sudut, dan atur secara individual untuk bentuk asimetris (gelembung ucapan, tetes air, kartu miring).
- Pilih Unit —
pxuntuk radius piksel tetap,%untuk radius relatif terhadap ukuran elemen sendiri (berguna untuk lingkaran/elips sempurna pada kotak persegi), atauem/remuntuk menskalakan dengan ukuran font. - Salin CSS yang dihasilkan dari kotak CSS, atau unduh sebagai file
.css, dan tempel ke stylesheet Anda.
Output diperbarui secara instan saat Anda menyesuaikan kontrol apa pun — tidak ada langkah "buat" terpisah.
Mengapa output terkadang lebih pendek dari yang diharapkan
Jika keempat sudut berakhir sama, alat memancarkan bentuk nilai tunggal yang ringkas (border-radius: 20px;) daripada secara tidak perlu mengulangi nilai yang sama empat kali (border-radius: 20px 20px 20px 20px;). Keduanya adalah CSS yang valid dan merender identik — bentuk nilai tunggal hanya lebih bersih dibaca dan dirawat. Segera setelah sudut apa pun berbeda, keempat nilai ditulis secara eksplisit, dalam urutan atas-kiri → atas-kanan → bawah-kanan → bawah-kiri seperti dijelaskan di atas.
Pertanyaan yang Sering Diajukan
Bisakah saya menggunakan persentase untuk lingkaran sempurna?
Ya — atur unit ke % dan radius (seragam) ke 50% pada elemen persegi (lebar dan tinggi sama). Itu membulatkan keempat sudut menjadi lingkaran penuh.
Apa perbedaan antara px, %, em, dan rem?
px adalah ukuran tetap terlepas dari konteks. % relatif terhadap lebar/tinggi elemen sendiri, jadi secara otomatis diskalakan jika kotak diubah ukuran. em relatif terhadap ukuran font elemen sendiri; rem relatif terhadap ukuran font root (html), jadi diskalakan secara konsisten dengan ukuran teks dasar halaman di mana pun digunakan.
Apakah alat ini mendukung sudut elips (radius horizontal/vertikal terpisah)?
Tidak saat ini — alat ini mencakup kasus umum seragam dan empat sudut. Untuk sudut elips, gunakan shorthand CSS border-radius: <nilai horizontal> / <nilai vertikal> langsung di stylesheet Anda.
Apakah ini akan berfungsi di setiap browser?
Ya. border-radius telah didukung tanpa awalan di semua browser utama selama lebih dari satu dekade.
Privasi
Semuanya terjadi di browser Anda. Tidak ada CSS, nilai, atau pengaturan yang Anda masukkan yang pernah dikirim ke server — deklarasi dihasilkan dan diperbarui secara lokal saat Anda mengetik.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/border-radius-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"linked": "true",
"unit": "px",
"topLeft": "10",
"topRight": "0",
"bottomRight": "0",
"bottomLeft": "0"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `border-radius-generator` tool (Border Radius Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/border-radius-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Border Radius — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan | Mulai dari 5 kredit |
|---|