border-width

CSSborder-width プロパティは、要素の境界線の四辺すべての線の幅を設定する一括指定プロパティです。

それぞれの辺は個別に、 border-top-width, border-right-width, border-bottom-width, border-left-width や、書字方向による指定を利用して border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width で設定することができます。

構文

/* キーワード値 */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> 値 */
border-width: 4px;
border-width: 1.2rem;

/* 上下 | 左右 */
border-width: 2px 1.5em;

/* 上 | 左右 | 下 */
border-width: 1px 2em 1.5cm;

/* 上 | 右 | 下 | 左 */
border-width: 1px 2em 0 4rem;

/* グローバルキーワード */
border-width: inherit;
border-width: initial;
border-width: unset;

border-width プロパティは一つ、二つ、三つ、四つの値を使って指定することができます。

  • 値が一つ指定された場合、全四辺に同じ幅が適用される。
  • 値が二つ指定された場合、1つ目の幅は上下、2つ目は左右の辺に適用される。
  • 値が三つ指定された場合、1つ目の幅は、2つ目は左右、3つ目はの辺に適用される。
  • 値が四つ指定された場合、幅はそれぞれの順 (時計回り) に適用される。

<line-width>
明示的な非負の <length> またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
thin
 
細い境界線
medium
 
中くらいの境界線
thick
 
太い境界線

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

形式文法

<line-width>{1,4}

where
<line-width> = <length> | thin | medium | thick

値と長さの組み合わせ

HTML

<p id="sval">
    one value: 6px wide border on all 4 sides</p>
<p id="bival">
    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">
    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">
    four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p>

CSS

#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

結果

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-width の定義
勧告候補 直接は変更なし。 CSS の <length> データ型拡張がこのプロパティに影響。
CSS Level 2 (Revision 1)
border-width の定義
勧告 値の意味が文書内で一定でなければならないという制限を追加。
CSS Level 1
border-width の定義
勧告 初回定義
初期値一括指定の各プロパティとして
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報