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 のプロパティで、要素の境界の幅を設定します。

試してみましょう

border-width: thick;

border-width: 1em;

border-width: 4px 1.25em;

border-width: 2ex 1.25ex 0.5ex;

border-width: 0 4px 8px 12px;


  

    This is a box with a border around it.
  




#example-element {
  background-color: palegreen;
  color: #000;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* キーワード値 */
border-width: thin;
border-width: medium;
border-width: thick;

/*  値 */
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 つ指定された場合、幅はそれぞれ上、右、下、左の順 (時計回り) に適用される。

値

境界の幅を、明示的な非負の またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。

  • thin
  • medium
  • thick

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

border-width = 
  {1,4}  

 = 
    |
  thin            |
  medium          |
  thick

例

値と長さの組み合わせ

HTML

html
1 つの値: 6px 幅が全 4 辺の境界に適用



  異なる値 2 つの値: 2px 幅が上下の境界に、 10px 幅が左右の境界に適用




  異なる 3 つの値: 0.3em 幅が上に、 9px 幅が下に、ゼロ幅が左右に適用




  異なる 4 つの値: "thin" が上に、 "medium" が右に、 "thick" が下に、 1em が左に

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

ブラウザーの互換性

関連情報