border-width:境界線(外枠、枠線、ボーダー)の幅を指定する

初期値 medium
適用対象 全ての要素、::first-letter
継承 しない
アニメーション <length>値
対応ブラウザ caniuseで確認

border-widthプロパティの説明

border-widthは、要素に設定した境界線(外枠、枠線)の幅、つまり太さを指定します。ボーダーの太さを指定する場合、先にborder-styleを指定しておかなければなりません。この値を省略すると初期値であるnoneが選ばれて境界線そのものが表示されなくなります。

border-widthは、上下左右すべての境界線の幅を一括で指定するショートハンド・プロパティです。まとめて色や形状も指定する場合は、borderを使用して下さい。

各辺の値は以下のプロパティで個別に指定できます。

border-widthに指定できる値

<line-width>
境界線の幅を指定するキーワードあるいはデータ型の指定値です。使用できるものは以下になります。
thin
境界線を細い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
medium
境界線を中太の線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
thick
境界線を太い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
<length>
CSSで使用できる単位つきの数値で指定します。ピクセル値、フォントサイズ、ビューポートに対する割合などから選べます。

border-widthの使い方とサンプル

border-widthプロパティの構文は以下の通りです。

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

/* <length>値 */
border-width: 1px;
border-width: 0.5em;
border-width: 3pt;
border-width: 6vmax;

/* グローバル値 */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: unset;

border-widthの実例

それでは簡単な例を見てみましょう。ここでは、要素に境界線を指定し、太さだけを変えた場合の挙動を確かめます。

表示確認
CSS
.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	background-color: #eee;
	border-style: solid;
}
#border_1 {
	border-width: thin;
}
#border_2 {
	border-width: medium;
}
#border_3 {
	border-width: thick;
}
#border_4 {
	border-width: 1px;
}
#border_5 {
	border-width: 5px;
}
#border_6 {
	border-width: 10px;
}
HTML
<section class="samp_box">
	<p>border-width</p>
	<div id="border_1">thin</div>
	<div id="border_2">medium</div>
	<div id="border_3">thick</div>
	<div id="border_4">1px</div>
	<div id="border_5">5px</div>
	<div id="border_6">10px</div>
</section>

border-widthに関連するCSSプロパティ

境界線・輪郭線
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの装飾を一括で指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインと要素の空間を指定する
outline-style アウトラインの形状を指定する
outline-width アウトラインの太さを指定する