border-color

by 2 contributors:

概要

CSS の border-color プロパティは、要素の 4 辺の境界線の色 ( border-top-colorborder-right-colorborder-bottom-colorborder-left-color ) を設定するためのショートハンド・プロパティです。

構文

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
定義済の色名、もしくは各形式のカラーコードを指定。指定可能な値については <color> を参照して下さい。
inherit
親要素の border-color の計算値を継承

※境界線を表示するには、最低限、 border-style を設定する必要があります。

pre { 
  border-style: ridge dashed solid;
  border-color: orange blue;
  border-width: 6px;
}

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 The transparent keyword has been removed as it is now a part of the <color> data type.
CSS Level 2 (Revision 1) 勧告 ショートハンドプロパティと定義された
CSS Level 1 (※日本語訳 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) [1] 4.0 3.5 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1.9.2) [1] ? ? ?

[1] Firefox のような Gecko ベースのブラウザでは、Mozilla の先行拡張機能として、複数の色を境界線に設定できます。
-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, Yuichiro
最終更新者: ethertank,
サイドバーを隠す