CSSボーダースタイルジェネレーター — ギザギザ、波状、波打ったエッジ
装飾的なCSSボーダーエッジを生成します — ギザギザ、波状、または波打った状態は、通常のborder-radiusでは実現できませんが、mask-imageと繰り返しグラデーションを使用して、側面ごと（上/右/下/左）に独立したスタイル、サイズ、深さを備えています。
入力
色
上部のエッジ
1回の繰り返しの幅 — ピークからピークまでの1つの完全なサイクル（ピクセル）。
波/歯/波打ちが平らなエッジからどれくらい届くか（ピクセル）。
右側のエッジ
下部のエッジ
1回の繰り返しの幅 — ピークからピークまでの1つの完全なサイクル（ピクセル）。
波/歯/波打ちが平らなエッジからどれくらい届くか（ピクセル）。
左側のエッジ
出力
生成されたルールはこのクラスにスコープされているため、独自のスタイルと競合しません。
出力
ボーダースタイルがここに表示されます。
上のプレビューと一致します — CSSブロックと組み合わせてください。
このツールを使う他の方法
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"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-border-style-generator` tool (CSS Border Style Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-border-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSボーダースタイルジェネレーター — ギザギザ、波状、波打ったエッジ — 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>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールが行うこと
通常のborderとborder-radiusは直線と丸角のみを描画できます — カードの上部に破れた紙のようなギザギザを配置したり、バナーの下に波状の線を配置したり、クーポン上に「チケット」のような波打った状態を実現することはできません。このツールは、mask-image（繰り返されるlinear-gradient/radial-gradientパターン付き）を使用して波状の形をボックスの各側面に細い色付きストリップにカットすることにより、純粋なCSSでこれらの装飾的なボーダーを構築します — 画像ファイル、SVG、JavaScriptはありません。
各側面 — 上、右、下、左 — は独立してトグルされ、独自のスタイル（ギザギザ、波状、または波打った）を取得します。さらに、独自のサイズ（1回の繰り返しの幅）と振幅（波がどのくらい深く到達するか）も取得します。側面ごとにスタイルを混合することで、チケット状の外観（波打った上部、真っすぐな側面）や破れたノート状の外観（上部と下部のみギザギザ）が可能になります。
使用方法
- ボックスの背景とエッジの色を設定します。
- 装飾したい各側面について、有効化してスタイルを選択します：
- ギザギザ — 鋭い三角形の歯、破れたエッジやペナント旗のボーダーのような外観。
- 波状 — ギザギザと同じ頂点/谷のリズムですが、滑らかなS字曲線に丸められています。
- 波打った — 均一な円形の凸凹の列、すべて同じ方向に曲がっています — スタンプの穴あけエッジやレースエッジのような外観。
- サイズ（ピーク間の間隔）と振幅（波がどのくらい到達するか）を側面ごとに調整します。
- CSSとHTMLスニペットをコピーします — スニペットは
<div>ラッパー + 有効化された各側面に対して1つの子<div>です。CSSは各子を選択した波の形に マスクします。
border-imageまたはclip-pathの代わりにmask-imageを使用する理由
border-imageは一度に整数のボックス周辺に適用される9スライスのソースイメージです。そのため、4つの側面すべてが同じイメージの変種に強制されます — 上部にはギザギザを配置し、左側には通常のボーダーを配置する方法はありません。clip-pathは整数のボックスアウトラインを1つの形にカットできますが、他の側面が直線のままである場合は、1つのエッジを分離することはできません。側面ごとに独立したオーバーレイストリップをマスクすることで、各エッジを独立してトグルおよび構成できます。
ブラウザのサポート
mask-imageは現在のすべてのブラウザで接頭辞なしです。CSSは、接頭辞付きフォームのみを認識する古いWebKitエンジンのための同等の-webkit-mask-*バリアントも備えています。
FAQ
ボックスの実際のコーナーも丸くできますか？
はい — ラッパー<div>に独自のborder-radiusを追加します（このツールが生成する.io-border-boxスタイルクラス）。エッジストリップは独立したオーバーレイレイヤーであるため、引き続き正しくマスクされますが、大きな半径は完全にクリーンな結合のため、ストリップ自身のコーナーを手動で調整する必要がある場合があります。波なしの単純な丸角については、代わりにボーダー半径ジェネレーターを使用してください。
これはドロップシャドウやクリップ形状とどう違うのですか？ CSSボックスシャドウジェネレーターはぼかしでボックスのエッジを柔らかくします。繰り返される波のパターンではなく。CSSクリップパスジェネレーターは整数ボックスを1つの固定形状（円、星、ポリゴン）にカットしています。ボックスの残りが長方形のままの場合の1つのエッジの装飾ではなく。
波がボックスの外側のエッジまでカットされるのはなぜですか？ これはパターンの「谷」です — 2つのピーク間の中点で、ストリップのマスクが完全に透明になり、下にボックス自身の背景色が露出します。これは意図的です：エッジを直線上のただのバンプではなく、本物のギザギザ/波/波打ちエッジとして読めるようにします。
プライバシー
すべてはブラウザで実行されます。色と設定はサーバーに送信されません — コントロールを調整するにつれてCSSとプレビューはローカルで更新されます。