Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    border-color

    概要

    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,
    サイドバーを隠す