Pembuat Gaya Border CSS — Tepi Zigzag, Bergelombang & Bergerigi
Hasilkan tepi border dekoratif CSS — zigzag, bergelombang, atau bergerigi — yang tidak dapat diproduksi oleh border-radius biasa, dengan gaya, ukuran, dan kedalaman independen per sisi (atas/kanan/bawah/kiri) melalui mask-image dan gradient berulang.
Input
Warna
Tepi atas
Lebar satu pengulangan — satu siklus puncak-ke-puncak lengkap, dalam piksel.
Seberapa jauh gelombang/gigi/bergerigi mencapai dari tepi datar, dalam piksel.
Tepi kanan
Tepi bawah
Lebar satu pengulangan — satu siklus puncak-ke-puncak lengkap, dalam piksel.
Seberapa jauh gelombang/gigi/bergerigi mencapai dari tepi datar, dalam piksel.
Tepi kiri
Keluaran
Aturan yang dihasilkan dibatasi pada kelas ini, sehingga tidak akan bertabrakan dengan gaya Anda sendiri.
Output
Gaya border Anda akan muncul di sini.
Cocok dengan pratinjau di atas — pasangkan dengan blok CSS.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-border-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bgColor": "#ffffff",
"edgeColor": "#6366f1",
"topEnabled": "true",
"topStyle": "zigzag",
"topSize": "24",
"topAmplitude": "12",
"rightEnabled": "",
"rightStyle": "wavy",
"rightSize": "24",
"rightAmplitude": "12",
"bottomEnabled": "true",
"bottomStyle": "zigzag",
"bottomSize": "24",
"bottomAmplitude": "12",
"leftEnabled": "",
"leftStyle": "wavy",
"leftSize": "24",
"leftAmplitude": "12",
"className": "io-border-box"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-border-style-generator` tool (CSS Border Style 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/css-border-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Gaya Border CSS — Tepi Zigzag, Bergelombang & Bergerigi — 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 API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukan alat ini
border dan border-radius biasa hanya dapat menggambar garis lurus dan sudut bundar — mereka tidak dapat membuat zigzag kertas robek di sepanjang bagian atas kartu, garis bergelombang di bawah spanduk, atau tepi "potongan tiket" bergerigi pada kupon. Alat ini membangun tepi dekoratif tersebut dalam CSS murni, menggunakan mask-image (dengan pola linear-gradient/radial-gradient berulang) untuk memotong bentuk gelombang ke dalam garis berwarna tipis di setiap sisi kotak — tanpa file gambar, tanpa SVG, tanpa JavaScript.
Setiap sisi — atas, kanan, bawah, kiri — beralih secara independen dan mendapatkan gaya sendiri (Zigzag, Bergelombang, atau Bergerigi), ditambah Ukuran sendiri (lebar satu pengulangan) dan Amplitudo (seberapa dalam gelombang mencapai). Mencampur gaya per sisi adalah apa yang membuat penampilan potongan tiket (atas bergerigi, sisi lurus) atau penampilan buku robek (hanya atas dan bawah zigzag) menjadi mungkin.
Cara menggunakannya
- Atur Latar belakang kotak dan Warna tepi.
- Untuk setiap sisi yang ingin Anda dekorasi, aktifkan dan pilih gaya:
- Zigzag — gigi segitiga tajam, seperti tepi robek atau border bendera pennant.
- Bergelombang — irama puncak/lembah yang sama seperti zigzag, tetapi dibulatkan menjadi kurva S yang halus.
- Bergerigi — deretan benjolan bundar seragam, semuanya melengkung dengan cara yang sama — penampilan tepi perforasi perangko atau tepi renda.
- Sesuaikan Ukuran (spasi antar puncak) dan Amplitudo (seberapa jauh gelombang mencapai) per sisi.
- Salin CSS dan cuplikan HTML — cuplikan adalah pembungkus
<div>ditambah satu<div>anak per sisi yang diaktifkan; CSS menutupi setiap anak menjadi gelombang pilihan.
Mengapa mask-image bukannya border-image atau clip-path
border-image adalah satu gambar sumber 9-iris yang diterapkan di sekitar seluruh kotak sekaligus, jadi keempat sisi dipaksa menjadi variasi gambar yang sama — tidak ada cara untuk memberikan atas zigzag dan kiri tepi biasa. clip-path dapat memotong garis besar kotak seluruhnya menjadi satu bentuk, tetapi bukan satu tepi dalam isolasi sementara yang lain tetap lurus. Menutupi garis overlay independen per sisi adalah apa yang membuat setiap tepi beralih dan dikonfigurasi secara independen.
Dukungan browser
mask-image tidak memiliki awalan dalam semua browser saat ini; CSS juga mengirimkan setara -webkit-mask-* di sampingnya untuk mesin WebKit yang lebih lama yang hanya mengenali bentuk yang awalan.
FAQ
Bisakah saya membulatkan sudut kotak yang sebenarnya juga?
Ya — tambahkan border-radius Anda sendiri ke pembungkus <div> (kelas gaya .io-border-box yang dibuat alat ini); garis tepi masih menutupi dengan benar karena merupakan lapisan overlay independen, meskipun radius besar mungkin perlu sudut garis itu sendiri untuk dibuat lebih mudah dengan tangan untuk sambungan yang sempurna. Untuk sudut bundar sederhana tanpa gelombang apa pun, gunakan Pembuat Jari-jari Border sebagai gantinya.
Bagaimana perbedaannya dari bayangan jatuh atau bentuk terpotong? Pembuat Bayangan Kotak CSS melembutkan tepi kotak dengan blur, bukan pola gelombang berulang. Pembuat Clip-Path CSS memotong seluruh kotak menjadi satu bentuk tetap (lingkaran, bintang, poligon) daripada mendekorasi satu tepi sementara membiarkan sisa kotak persegi panjang.
Mengapa gelombang kadang-kadang dipotong sampai ke tepi luar kotak? Itulah "lembah" pola — di titik tengah antara dua puncak, topeng garis overlay menjadi sepenuhnya transparan, mengekspos warna latar kotak itu sendiri di bawahnya. Ini disengaja: inilah yang membuat tepi terbaca sebagai zigzag/gelombang/bergerigi yang asli daripada garis lurus dengan tonjolan di atasnya.
Privasi
Semuanya berjalan di browser Anda. Warna dan pengaturan Anda tidak pernah dikirim ke server — CSS dan pratinjau diperbarui secara lokal saat Anda menyesuaikan kontrol.