1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. border-width

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

border-width

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは周囲に境界があるボックスです。
  </div>
</section>

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

構成要素のプロパティ

このプロパティは以下の 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 = 
  <'border-top-width'>{1,4}  

<border-top-width> = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick
この構文は CSS Borders and Box Decorations Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

値と長さの組み合わせ

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 #cccccc;
  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;
}

結果

仕様書

仕様書
CSS Backgrounds and Borders Module Level 3
# border-width

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告