ボーダーカラープロパティ

最終更新：2026-09-13

border-color ボーダーカラープロパティ

border-color は要素のボーダーの色を設定します。color 名、hex 値、rgb()、rgba()、hsl() など、あらゆる CSS の色形式を受け付けます。単独で使用した場合、幅やスタイルではなくボーダーの色だけに影響します。

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

📝 構文

border-color: <color>{1,4};

⚙️ 値

値	タイプ	説明
`<color>`	タイプ	ボーダーの色の値
`transparent`	キーワード	透明なボーダー

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： border-color は 1〜4 個の値を受け付けるため、各辺に異なる色を指定できます。例: border-color: red green blue orange。

ヒント： transparent を使うと見えないボーダーを作れます。多くの場合、hover 時にボーダーを追加してもレイアウトがずれないよう、スペースを確保するために使われます。

❓ よくある質問

Qborder-color の既定値は何ですか？

A既定値は currentcolor で、ボーダーは自動的に要素の現在のテキスト色（color プロパティの値）を使用します。そのため、border-width と border-style だけを設定して色を指定しない場合、ボーダーはテキスト色に従います。ボーダーをテキストから独立させるには、border-color: #333; のように色を明示的に指定してください。

Q4 辺に異なる色を指定するにはどうすればよいですか？

Aborder-color は上から時計回りに割り当てる 1〜4 個の値を受け付けます。1 つの値は 4 辺すべて、2 つの値は上下・左右、3 つの値は上・左右・下、4 つの値は上・右・下・左に対応します。例: border-color: red green blue orange;。または border-top-color のような辺ごとのプロパティで精緻に制御できます。

Qborder-color はどの色形式に対応していますか？

Aすべての CSS 色形式に対応しています。キーワード（red、transparent）、hex コード（#9b59b6、#f00）、rgb()/rgba()、hsl()/hsla()、currentcolor です。rgba() は半透明のボーダーを作り、transparent は一般的な透明なプレースホルダー、hsla() は色相を保ったままアルファを調整できます。

Qhover 時にレイアウトのずれを防ぐため、透明なボーダーをどう使えばよいですか？

Aまず border: 2px solid transparent; でスペースを確保し、hover 時に色だけを変更します。例: border-color: #3498db;。ボーダーは常に存在するため、要素のサイズは変わらずレイアウトもずれません。これはナビリンクやボタンの標準的なずれ防止の手法です。