{{CSSRef()}}
{{translationinprogress()}}
{{英語版章題('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: color /* one-value syntax */ border-color: horizontal vertical /* two-value syntax */ border-color: top vertical bottom /* three-value syntax */ border-color: top right bottom left /* four-value syntax */ border-color: inherit
値
1 ~ 4 つの値を指定します。指定数により、適用される方向が異なります。
値が 1 つの場合、4 つ全ての辺に同じ値が適用されます。
値が 2 つの場合、1 つ目は上下の、2 つ目は左右の辺に適用されます。
値が 3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下の辺に適用されます。
値が 4 つの場合、上、右、下、左の順(上辺から時計回り)の辺に適用されます。
- color
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to all four edges. It is used only in the one-value syntax.
- horizontal
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
- vertical
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
- top
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to the top edge. It is used only in the three- and four-value syntaxes.
- bottom
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
- right
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to the top edge. It is used only in the four-value syntax.
- left
- Is a {{Xref_csscolorvalue()}} denoting the color to apply to the top edge. It is used only in the four-value syntax.
- inherit
- Is a keyword indicating that all four values are inherited from their parent's element calculated value.
境界線を表示するには、最低限、 {{Cssxref("border-style")}} を設定する必要があります。
{{英語版章題('Examples')}}
例
pre { border-style: ridge dashed solid; border-color: orange blue; }
{{英語版章題('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")}}