仕様

プロパティborder-width
値<line-width>{1,4}
補足： <line-width> = <length> | thin | medium | thick
一括/個別一括指定プロパティ
一括： border
個別： border-top-width, border-right-width, border-bottom-width, border-left-width
初期値medium
適用対象 ruby base containers and ruby annotation containers を除くすべての要素
継承なし
百分率なし
計算値絶対的な長さ。border-style が none または hidden の場合は 0 。
メディアvisual
border-widthプロパティは、要素の上下左右の境界線の幅に関してのプロパティを一括して設定します。

border-width プロパティは、要素の境界線の幅の上(border-top-width), 右(border-right-width), 下(border-bottom-width), 左(border-left-width) の値を単一の宣言で設定する一括指定プロパティです。
順番に意味があり指定する数にも意味があります。

上，右，下，左で一部を初期値などにしたい場合は、
border-top-width, border-right-width, border-bottom-width, border-left-width 等を用います。
値は上，右，下，左に個別の指定で値が１つであるだけで、border-width と同じ規則です。

  1. .cdvSample300 > div > div { border-style: solid; border-width: 1.0em; }
  1. <div class="cdvSample300">
  2. <div>
  3. <div>ボーダー</div>
  4. </div>
  5. </div>
ボーダー
参照元
  1. CSS Level 2 W3C 勧告. 8.5.1 Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'
  2. CSS Level 1 W3C 勧告. 5.5.15 'border-width'
  3. border-width - CSS: カスケーディングスタイルシート | MDN

値の数

  1. cdvSample320 > div { border-style: solid; border-color: #cccccc; }
  1. <div class="cdvSample320">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。境界の色の指定は、見た目の為に指定しています。

例
  1. border-width: 1em 2em 3em 4em;

値を４つ指定しました。値は 上，右，下，左 で設定されます。

例
  1. border-width: 1em 2em 3em;

値を３つ指定しました。値は 上，左右，下 で設定されます。

例
  1. border-width: 1em 2em;

値を２つ指定しました。値は 上下，左右 で設定されます。

例
  1. border-width: 1em;

値を１つ指定しました。値は 上下左右 で設定されます。

例

<length> 値

  1. cdvSample330 > div { border-style: solid; }
  1. <div class="cdvSample330">
  2. <div style="font-size: 2em;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。フォントサイズは、幅の記述する単位にフォントサイズがあるのでその確認の為の記述です。

例
  1. border-width: 1em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. border-width: 1.6rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素の font-size の計算値を用います。
(html { font-size: 62.5%; } body { font-size: 1.6em; } で、body からそのまま継承している状態で提示しています。)

例
  1. border-width: 16px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。

例
  1. border-width: 1vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例

キーワード

  1. cdvSample330 > div { border-style: solid; }
  1. <div class="cdvSample011">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

例
  1. border-width: thin;

キーワード thin を指定しました。thin は、細い線です。

例
  1. border-width: medium;

キーワード medium を指定しました。medium は、中くらいの線です。medium は、border-width の初期値です。

例
  1. border-width: thick;

キーワード thick を指定しました。thick は、太い線です。

例

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-width, border-right-width, border-bottom-width, border-left-width)を使用して設定します。

  1. cdvSample350 > div { padding: 0.5em; border: solid 0.5em #0000ff; }
  2. cdvSample350 > div > div { border-style: solid; }
  1. <div class="cdvSample350">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

親
子
  1. border-width: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-width: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-width プロパティの初期値は medium です。

親
子
  1. border-width: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-width プロパティは非継承プロパティなので初期値の medium を設定します。

親
子