mozilla
Your Search Results

    border-width

    概要

    CSSプロパティ border-width は、ボックスの境界線の幅を設定します。ショートカットプロパティborderを使用した方が、便利なことが多いです。

    構文

     border-width:  <border-width> {1,4}
    

    1個か2個か3個か4個の <border-width> の値を取ることができます。空白で区切られたこれらの値は、上下左右のボックスの境界線幅を設定します。

    1個の値が設定されている場合、4辺全てに適用されます。
    2個の値が設定されている場合、1つ目上下の辺に、2つ目左右の辺に適用されます。
    3個の場合は、上、右、下に適用されます。左の辺は2番目の値が使われます。
    4個の場合は、上、右、下、左の順の辺に適用されます。

    <border-width>
    1個の値またはキーワードを取ります:   <length> | thin | medium | thick
    thin
    UAに依存します。一般的に、Firefox や IE 8 のようなデスクトップブラウザでは 1px になります。 IE 4-7 では 2px になります。
    medium
    UAに依存します。一般的に、Firefox や IE 8 のようなデスクトップブラウザでは 3px になります。 IE 4-7 では 4px になります。
    thick
    UAに依存します。一般的に、Firefox や IE 8 のようなデスクトップブラウザでは 5px になります。 IE 4-7 では 6px になります。
    <length>
    境界線の太さは明確な値を持っています。負の値は使用できません。使用できる単位は <length> を参照してください。

    関連するプロパティ

    サンプル

    border: ridge #ccc;
    border-width: 6px;  /* "border: ridge #ccc 6px"としても同じです。4辺全てに太さ 6px の境界線。 */
    border: solid red;
    border-width: 2px 10px;  /* 上下に 2px、左右に 10px の太さの境界線。 */
    
    border: dotted orange;
    border-width: 0.3em 0;   /* 上下に太さ 0.3em の境界線、左右は無し。 */
    
    border: solid lightgreen;
    border-width: medium 0 1px thick;  /* 3つの異なる幅の境界線、右は無し。 */
    

    仕様

    ブラウザの互換性

    機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
    基本機能 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
    機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    基本機能 1.0 (1.9.2) ? ? ? ?

    参考

    border, border-style, border-color

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

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