border-width

border-width は一括指定の CSS のプロパティで、要素の境界の幅を設定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の 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

関連情報