ボーダースタイルプロパティ

最終更新：2026-09-13

border-style ボーダースタイルプロパティ

border-style はボーダーの線の外観（solid、dashed、dotted など）を定義します。ボーダーが表示されるかどうかの鍵であり、border-width や border-color を設定していても、border-style が none の場合はボーダーは表示されません。CSS では 10 種類の線スタイルから選択できます。

カテゴリ
初期値	none
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset{1,4};

⚙️ 値

値	タイプ	説明
`none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset`	キーワード	10 種類のボーダー線スタイル

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
border-style	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： solid が最もよく使われるスタイルです。dashed や dotted は仮のマーカーや下書き状態によく使われます。

注意： none と hidden はどちらもボーダーを描画しませんが、hidden は border-collapse: collapse の表内で隣接するボーダーも抑制するため、動作が異なります。

❓ よくある質問

Qgroove、ridge、inset、outset が平坦に見えるのはなぜですか？

Aこれら 4 つの 3D スタイルは、立体感を生み出すためにボーダー色の明暗のコントラストに依存しています。そのため、色のコントラストが低い場合やボーダーが細い場合は効果がほとんど見えません。モダンなフラット UI ではほとんど使われず、わずかな階層感が欲しい場合は solid と box-shadow の組み合わせが推奨されます。

Qborder-style: none と hidden の違いは何ですか？

Aどちらもボーダーを描画しません。違いが重要になるのは表の中です。border-collapse: collapse の場合、hidden は隣接するボーダーを強制的に抑制します（最優先）が、none は優先度が低く、隣接するセルのボーダーが表示されることがあります。通常の要素では両者の動作は同じです。

QCSS にはどんなボーダー線スタイルがあり、それぞれいつ使うべきですか？

ACSS には 10 種類のスタイルがあります。none、hidden、solid、dashed、dotted、double、groove、ridge、inset、outset です。solid が最も一般的で、dashed や dotted は区切り線に適し、double は強調に、4 つの 3D スタイルはフラットデザインではほとんど使われません。必要な視覚的な重みに応じて選んでください。

Q片側だけ破線にするなど、混合スタイルを作るにはどうすればよいですか？

Aborder-style は上・右・下・左の各辺に割り当てる 1〜4 個の値を受け付けるため、border-style: solid dashed; とすると上下が実線、左右が破線になります。片側だけの破線には、border-top-style: dashed; border-bottom-style: solid; のように辺ごとのプロパティを組み合わせることもできます。