CSS装飾枠ジェネレーターとは？border だけでは作れない囲み枠を作る
CSS の border で引けるのは、実線・破線・点線などの決まった線だけです。このツールでは、グラデーションの枠、カギカッコ風、手書き風、版ズレ風、ふきだし、色の縞の点線、波線・ギザギザ・切手風・モコモコの縁といった11種類の囲み枠を、色・太さ・角丸・大きさを調整しながら作れます。
ワンタッチ着せ替えのプリセットは28種類です。できた HTML と CSS はボタン1つでコピーでき、枠だけを背景透過の PNG 画像として保存することもできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 枠の種類を選ぶ。プリセットから近いものを選ぶか、「ボーダーの種類」を決めて、色・太さ・角丸などを調整します。
- HTML と CSS をコピーする。HTML と CSS の Copy ボタンを押して貼り付けます。HTML は
<div class="custom-border-box">の形で出力されます。 - 大きさを自分のページに合わせる。CSS の
widthとheightは px の固定値で出力されます。文章の量に合わせたいときは、width: 100%;やheight: auto;に書き換えてください。
グラデーションの枠は、背景を2枚重ねて外側の1枚を枠の部分だけに見せる方法（background-clip と background-origin）で描いているので、角丸にできます。
ブラウザ対応
| ブラウザ | border-image（点線・波線など） |
conic-gradient（円錐グラデーション） |
|---|---|---|
| Chrome・Edge | Chrome 16 以降・Edge 12 以降 | Chrome 69 以降・Edge 79 以降 |
| Safari（Mac・iPhone） | 6 以降 | Mac 12.1 以降・iPhone 12.2 以降 |
| Firefox | 15 以降 | 83 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。いま使われている主なブラウザはすべて対応しています。
よくある質問 (FAQ)
ストライプ点線・波線・ギザギザ・切手風・モコモコは
border-image で描いていて、border-radius は border-image に効かないためです。
角を丸くしたいときは、背景で描くグラデーションの枠（線形・円錐）を選んでください。
出力される CSS の幅と高さが px の固定値だからです。
height を auto に、width を 100% や max-width に書き換えると、中身に合わせて枠が伸びます。
枠の内側に余白がほしいときは padding を足してください。
変えられます。「ふきだし」を選ぶと、しっぽの向き（上下左右）・サイズ・位置を指定できます。しっぽは
::before の疑似要素で描いているので、HTML を書き足す必要はありません。
できます。「保存」ボタンで、お使いのブラウザの履歴に残してあとから呼び出せます。「URLでシェア」を押すと、今の設定を開ける URL がコピーされます。
枠の見た目は「PNG保存」で画像にもできます（ボックスだけを背景透過で保存します）。