{{CSSRef()}}
{{英語版章題('Summary')}}
概要
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()}} 指定値
{{英語版章題('Syntax')}}
構文
border-color: value /* one-value syntax */
border-color: value value /* two-value syntax */
border-color: value value value /* three-value syntax */
border-color: value value value value /* four-value syntax */
{{英語版章題('Values')}}
値
1 ~ 4 つの値を指定します。指定数により、適用される方向が異なります。
- 値が 1 つの場合、全辺 に同じ値が適用される。
- 値が 2 つの場合、1 つ目は上下の、2 つ目は左右の辺に適用される。
- 値が 3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つの場合、それぞれ上、右、下、左の順(上辺から時計回り)の辺に適用される。
-
color
- 定義済の色名、もしくは各形式のカラーコードを指定。指定可能な値については {{Xref_csscolorvalue()}} を参照して下さい。
-
inherit
-
親要素の
border-color
の計算値を継承
境界線を表示するには、最低限、 {{Cssxref("border-style")}} を設定する必要があります。
{{英語版章題('Examples')}}
例
pre { border-style: ridge dashed solid; border-color: orange blue; border-width: 6px; }
{{英語版章題('Specifications')}}
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
{{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')}} | The property is now a shorthand property |
{{SpecName('CSS1', '#border-color', 'border-color')}} | {{Spec2('CSS1')}} |
{{英語版章題('Browser compatibility')}}
ブラウザ実装状況
{{CompatibilityTable()}}
機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本機能 | {{CompatGeckoDesktop("1.0")}} | 1.0 | 4.0 | 3.5 | 1.0 (85) |
機能 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本機能 | {{CompatGeckoMobile("1.9.2")}} [1] | {{CompatUnknown()}} | {{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")}}
{{英語版章題('See also')}}
参照
- 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")}}