border-width
試してみましょう
構成要素のプロパティ
このプロパティは以下の 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