border:要素の外周に境界線を引くための値を一括で指定する

初期値 各プロパティの初期値
適用対象 全ての要素、::first-letter
継承 しない
アニメーション 各プロパティの値に基づく
対応ブラウザ caniuseで確認

borderプロパティの説明

borderは、要素の外周に表示される境界線の色、種類、太さを一括で指定するショートハンド・プロパティです。境界線は外枠や枠線とも呼ばれ、コンテンツを包含するボックスの縁を取り囲むように表示されます。

borderで指定できる値は、border-colorborder-styleborder-widthです。一括で指定する場合は、省略した値が初期値として扱われます。特に、border-styleの初期値はnoneであるため、省略すると表示されない点に注意して下さい。

既定値では、境界線の太さを変えると要素の外側へ向かって膨張します。これはbox-sizingの値がcontent-boxになっているためであり、この値をborder-boxに変更することによって、内側へ向かって広がるように変更できます。

境界線に画像やグラデーションを表示させたい場合は、border-imageを使用します。グラデーションは画像扱いになるため、borderでは指定できません。

このプロパティによる一括指定は、要素の四辺全てを同じ装飾にしたい場合に有効です。それぞれの辺の外枠を個別に指定する場合は、以下のいずれかのプロパティを使用して下さい。

borderに指定できる値

<color>
CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。初期値はcurrentcolorです。詳細はborder-colorを参照して下さい。
<line-style>
境界線をどのようなスタイルで装飾するのか、キーワードで種類を指定します。この値を省略すると、border-styleの初期値がnoneであるため、境界線は表示されません。
<line-width>
境界線の太さを指定します。キーワードやCSSで使用できる単位つきの数値を与えます。初期値はmediumです。詳細はborder-widthを参照して下さい。

borderの使い方とサンプル

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

CSS
/* 種類 */
border: solid;
border: dotted;
border: dashed;

/* 太さ 種類 */
border: 1px solid;
border: 3px inset;
border: 10px ridge;

/* 種類 色 */
border: double gray;
border: groove #09f;
border: solid rgba(0, 0, 0, .5);

/* 太さ 種類 色 */
border: 1px solid #333;
border: medium dashed green;
border: 1rem dotted rgba(153, 5, 35, 25%);

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

borderの実例

それでは実際にborderプロパティの書き方を見ていきましょう。ここでは、いくつかの要素にborderを指定し、値を変更したものを並べて比較します。

表示確認
CSS
.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
}
#border_1 {
	border: 1px solid #666;
}
#border_2 {
	border: 2px dotted #06f;
}
#border_3 {
	border: .3rem dashed #333;
}
#border_4 {
	border: 10px double rgba(14, 129, 153, 50%);
}
#border_5 {
	border: thick ridge Green;
}
HTML
<section class="samp_box">
	<p>border</p>
	<div id="border_1">1px solid #666</div>
	<div id="border_2">2px dotted #06f</div>
	<div id="border_3">.3rem dashed #333</div>
	<div id="border_4">10px double rgba(14, 129, 153, 50%)</div>
	<div id="border_5">thick ridge Green</div>
</section>

borderに関連する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 アウトラインの太さを指定する