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.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報