CSS の border-width
プロパティは、要素の境界線の四辺すべての線の幅を設定する一括指定プロパティです。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
それぞれの辺は個別に、 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
というパターンに従い、値は同じ文書の中では一貫しています。
形式文法
例
値と長さの組み合わせ
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 にも適用されます。 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
ブラウザーの対応
BCD tables only load in the browser
関連情報
- 境界線に関する一括指定プロパティ:
border
,border-style
,border-color
- 境界線の幅に関するプロパティ:
border-bottom-width
,border-left-width
,border-right-width
,border-top-width