{{CSSRef}}
概要
CSS の border-color
プロパティは、要素の 4 辺の境界線の色 ( {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} ) を設定するためのショートハンド・プロパティです。
- {{Xref_cssinitial}} 要素の {{Cssxref("color")}} プロパティ
- 適用対象 全ての要素
- {{Xref_cssinherited}} しない
- 相対値の基準 N/A
- メディア {{Xref_cssvisual}}
- {{Xref_csscomputed}} 指定値
構文
border-color: value /* 1 値構文 */
border-color: value value /* 2 値構文 */
border-color: value value value /* 3 値構文 */
border-color: value value value value /* 4 値構文 */
値
1 ~ 4 つの値を指定します。指定数により、適用される方向が異なります。
- 値が 1 つの場合、全辺 に同じ値が適用される。
- 値が 2 つの場合、1 つ目は上下の、2 つ目は左右の辺に適用される。
- 値が 3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つの場合、それぞれ上、右、下、左の順(上辺から時計回り)の辺に適用される。
- color
- 定義済の色名、もしくは各形式のカラーコードを指定。指定可能な値については {{Xref_csscolorvalue}} を参照して下さい。
- inherit
- 親要素の
border-color
の計算値を継承
※境界線を表示するには、最低限、 {{Cssxref("border-style")}} を設定する必要があります。
例
pre { border-style: ridge dashed solid; border-color: orange blue; border-width: 6px; }
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
{{SpecName('CSS3 Backgrounds', '#border-color', 'border-color')}} | {{Spec2('CSS3 Backgrounds')}} | The transparent keyword has been removed as it is now a part of the {{xref_csscolorvalue}} data type. |
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}} | {{Spec2('CSS2.1')}} | ショートハンドプロパティと定義された |
{{SpecName('CSS1', '#border-color', 'border-color')}} (※日本語訳) | {{Spec2('CSS1')}} |
ブラウザ実装状況
{{CompatibilityTable}}
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | 1.0 | {{CompatGeckoDesktop("1.0")}} [1] | 4.0 | 3.5 | 1.0 (85) |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | {{CompatUnknown}} | {{CompatGeckoMobile("1.9.2")}} [1] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] Firefox のような Gecko ベースのブラウザでは、Mozilla の先行拡張機能として、複数の色を境界線に設定できます。
{{Cssxref("-moz-border-top-colors")}} 、 {{Cssxref("-moz-border-right-colors")}} 、 {{Cssxref("-moz-border-bottom-colors")}} 、 {{Cssxref("-moz-border-left-colors")}}
関連情報
- Border-color 関連 CSS プロパティ: {{Cssxref("border")}} 、 {{cssxref("border-top-color")}} 、 {{cssxref("border-right-color")}} 、 {{cssxref("border-bottom-color")}} 、 {{cssxref("border-left-color")}}
- その他の border 関連 CSS プロパティ: {{Cssxref("border-width")}} 、 {{Cssxref("border-style")}}