CSS ボーダー スタイル生成

機能

• 実線・破線・点線・二重線・3D の溝・3D の隆起・波形の 7 種類
• ボーダー幅は 1〜20px、色はカラーピッカーで選択
• 四隅の角丸を個別に設定。楕円の角にも伸ばせます
• 楕円の角はスラッシュ記法で出力（水平と垂直の半径）
• 上・右・下・左のいずれか 1 辺だけを描画
• border-image で制御可能な破線や波形パターンを作成
• プレビューは即座に更新。「生成」ボタンはありません
• 下にコピーできる border と border-radius の宣言
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まずスタイルを選び、幅と色を調整します
2. 角丸が必要なら四隅を入力し、楕円にしたいときは垂直半径の割合を上げます
3. 1 辺だけ描くときはその辺を選びます
4. 制御可能な破線やパターンには border-image のスイッチを入れます

よくある質問

破線の長さを制御できないのはなぜですか？

仕様が破線の線分と間隔の長さを定めていないからです。各ブラウザーが独自の比率で描くため、`border-style: dashed` は「線と間隔が交互に来る」という意味しか持たず、線分の長さを指定する引数がありません。固定の長さ（たとえば 8px の線分と 4px の間隔）にしたいときは、`border-image` と繰り返しグラデーションに切り替えます。グラデーションの色の帯が線分、透明な帯が間隔になり、長さはグラデーションに書いた値そのものになります。本ツールの「制御可能な破線」スイッチはこの方法です。

ボーダーを付けたらボックスが大きくなったのはなぜですか？

既定の `box-sizing` が `content-box` で、`width` は内容のみを指し、`border` と `padding` はその外側に加算されるからです。幅 200px のボックスに 8px のボーダーを付けると実際には 216px を占めます。対処は要素に `box-sizing: border-box` を指定することです（現代のプロジェクトでは通常グローバルに一度設定します）。以後は `width` にボーダーが含まれ、幅を変えても全体のサイズは変わりません。

四隅の角丸を変えるにはどう書きますか？

`border-radius` をスペース区切りで書くと、4 つの値は順に左上・右上・右下・左下（左上から時計回り）です。値が 2 つなら「左上と右下 / 右上と左下」の対角、3 つなら最後が左下を補います。楕円の角（各角が四分円ではなく四分楕円）にするにはスラッシュを使います。スラッシュ前が水平半径、後が垂直半径で、たとえば `10px 20px 30px 40px / 5px 10px 15px 20px` です。本ツールの垂直半径の割合は、このスラッシュ後の並びを生成します。

1 辺だけ描くとレイアウトに影響しますか？

多少あります。`border-top` だけなら他の 3 辺の幅は 0 と見なされるため、要素は上側の数ピクセルだけ高くなります。一方 `border` を全体に書くと 4 辺すべてが領域を取ります。レイアウトに敏感な場面（表やグリッド）では `box-sizing: border-box` を併用するか、領域を取らない線として `outline` や `box-shadow` で描くことを検討してください。