border-width

CSS の border-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}ここで
<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 の定義	勧告	初回定義

初期値	一括指定の次の各プロパティとして `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium`
適用対象	すべての要素。 `::first-letter` にも適用されます。
継承	なし
計算値	一括指定の次の各プロパティとして `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0` `border-left-width`: 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0` `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0` `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
アニメーションの種類	一括指定の次の各プロパティとして `border-bottom-width`: length `border-left-width`: length `border-right-width`: length `border-top-width`: length

ブラウザーの対応

BCD tables only load in the browser