border-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* キーワード値 */
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: revert;
border-width: revert-layer;
border-width: unset;
border-width
プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。
- 値が 1 つ指定された場合、全 4 辺に同じ幅が適用される。
- 値が 2 つ指定された場合、1 つ目の幅は上下、2 つ目は左右の辺に適用される。
- 値が 3 つ指定された場合、1 つ目の幅は上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つ指定された場合、幅はそれぞれ上、右、下、左の順 (時計回り) に適用される。
値
<line-width>
-
境界の幅を、明示的な非負の
<length>
またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。thin
medium
thick
メモ:
仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick
というパターンに従い、値は同じ文書の中では一貫しています。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
border-width =
<line-width>{1,4}
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
例
値と長さの組み合わせ
HTML
html
<p id="one-value">1 つの値: 6px 幅が全 4 辺の境界に適用</p>
<p id="two-values">
異なる値 2 つの値: 2px 幅が上下の境界に、 10px 幅が左右の境界に適用
</p>
<p id="three-values">
異なる 3 つの値: 0.3em 幅が上に、 9px 幅が下に、ゼロ幅が左右に適用
</p>
<p id="four-values">
異なる 4 つの値: "thin" が上に、 "medium" が右に、 "thick" が下に、 1em が左に
</p>
CSS
css
#one-value {
border: ridge #ccc;
border-width: 6px;
}
#two-values {
border: solid red;
border-width: 2px 10px;
}
#three-values {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#four-values {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-width |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 境界線に関する一括指定プロパティ:
border
,border-style
,border-color
- 境界線の幅に関するプロパティ:
border-bottom-width
,border-left-width
,border-right-width
,border-top-width