CSS

The border property in CSS is used to specify the style, width, and color of an element's border, allowing for different values to be set for each of the four sides.

border

Sample

About border

　border は CSSの一括指定プロパティで、ボックスの上下左右のボーダー（境界）の種類・太さ・色に対して同じ値をまとめて指定することができます。

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

　各プロパティで指定できる値のうち、必要なものを半角スペースで区切って複数指定できます。指定する順序は自由です。指定しない値は、それぞれのプロパティの初期値になります。

CSS

セレクタ {
	border: 線の種類, 線の太さ, 線の色;
}

　このように複数のプロパティをまとめて記述する方法を「ショートハンド」といいます。ショートハンドで記述することができる border のようなプロパティは「ショートハンドプロパティ」と呼ばれています。

　なお枠線の角を丸めたい場合は「border-radius」プロパティをご参照ください。

これは、シンプルな使用例です。

HTML

<p>これは、シンプルな使用例です。</p>

CSS

p {
	border: solid 10px #0188ff;
}

　各プロパティの指定する順序は関係ありませんので、上記の使用例では「スタイル・太さ・色」の順でしたが、試しに順番を入れ替えてみます。

CSS

p {
	border: #0188ff solid 10px;
}

プロパティの指定の順番を入れ替えた、シンプルな使用例です。

　もちろん、表示に問題はありません。皆さんの都合、書きやすさで順番を入れ替えて差支え無さそうです。

　borderプロパティは要素の padding と margin の境界線を表示することができます。

　borderと要素、余白の構造は下の図のようなイメージです。

CSS box model image

ボーダーを一括で指定する場合の初期値について

　ボーダーには、上下左右それぞれに対して種類と太さと色を指定することができます。そして、それらの初期値は以下のようになっています。

種類の初期値
none （ボーダーのない状態で太さも 0 に設定される）
太さの初期値
medium （中くらいの太さ）
色の初期値
colorプロパティの値（文字色と同じ）

　ボーダーを一括で指定する場合には、「指定しない値は初期値にリセットされる」という点に注意してください。たとえば、最初にボーダー色（border-color）を設定していても、その後の一括指定で色の指定が省略されると、色は初期値に戻ることになります。一括指定は、変更したいプロパティの値だけを設定するものではなく、複数のプロパティをまとめて全部設定するものだということを覚えておいてください。

　上記の「シンプルな使用例」の色の設定（カラー）を消してみます。

CSS

p {
	border: solid 10px;
}

　これを表示すると、

これは、シンプルな使用例です。

　色の設定（カラー）部分が何もなかったので、初期値である文字色と同じ色でボーダーが表示されました。

　また、種類（スタイル）の初期値が none になっていることから、種類を選ばない（未設定）のまま、太さや色を設定しても何も表示されません。

CSS

p {
	border: 5px #0188ff;
}

　この太さと色だけを設定したものを表示させてみます。

これは、シンプルな使用例です。

　が、ボーダーは何も表示されません。

　逆に、スタイル（種類）のみを設定した場合は、太さと色は初期値のまま表示されます。

CSS

p {
	border: solid;
}

これは、シンプルな使用例です。

　このことからも、まず最初にスタイル（種類）を選択して設定することが有効なようです。

Overview of border

　borderプロパティの概要。

書式
border: 値（複数可）
適用対象
すべての要素
初期値
各プロパティの初期値
値の継承
しない
指定できる値
border-color プロパティの値
「 ボーダーの色 」を設定する場合と同様の値が指定できます。
border-width プロパティの値
「 ボーダーの太さ 」を設定する場合と同様の値が指定できます。
border-style プロパティの値
「 ボーダーのスタイル 」を設定する場合と同様の値が指定できます。
グローバル値
inherit
要素のプロパティの計算値を親要素から取得するよう指定します。
initial
要素にプロパティの初期値 (または既定値) を設定します。
unset
プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。

　borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。上下左右のボーダーを異なったものにする場合には、

　または、

　で、指定してください。

borderプロパティに指定できる値

border-styleプロパティの値

「 border-style（ボーダーのスタイルの一括指定） 」を設定する場合と同様の値が指定できます。

none
これが初期値です。ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルの border-collapseプロパティの値が「collapse」でテーブルを構成する枠の種類が競合する場合は、他の値が優先されます。
solid
１本線で表示します。
double
２本線で表示します。
dotted
点線で表示します。
dashed
破線で表示します。
groove
ボーダー部分が、立体的に凹んで見えるように表示します。
ridge
ボーダー部分が、立体的に飛び出して見えるように表示します。
inset
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーに囲まれた範囲全体が立体的に凹んで見えるように表示します。上下左右の一部にだけ指定しても立体感は出ません。テーブルの border-collapseプロパティの値が「collapse」の場合は、「groove」と同様に表示されます。
outset
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーに囲まれた範囲全体が立体的に飛び出て見えるように表示します。上下左右の一部にだけ指定しても立体感は出ません。テーブルの border-collapseプロパティの値が「collapse」の場合は、「ridge」と同様に表示されます。
hidden
ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルの border-collapseプロパティの値が「collapse」でテーブルを構成する枠の種類が競合する場合は、この値が優先されます。

　上記で使った「シンプルな使用例」のスタイル部分のみを書き替えてどのように表示されるか見てみます。

CSS

p {
	border: 10px none #0188ff;
}

/*
	border: 10px solid #0188ff;
	border: 10px double #0188ff;
	border: 10px dotted #0188ff;
	border: 10px dashed #0188ff;
	border: 10px groove #0188ff;
	border: 10px ridge #0188ff;
	border: 10px inset #0188ff;
	border: 10px outset #0188ff;
	border: 10px hidden #0188ff;
*/

スタイル部分のみを「none」に変更したシンプルな使用例です。

スタイル部分のみを「solid」に変更したシンプルな使用例です。

スタイル部分のみを「double」に変更したシンプルな使用例です。

スタイル部分のみを「dotted」に変更したシンプルな使用例です。

スタイル部分のみを「dashed」に変更したシンプルな使用例です。

スタイル部分のみを「groove」に変更したシンプルな使用例です。

スタイル部分のみを「ridge」に変更したシンプルな使用例です。

スタイル部分のみを「inset」に変更したシンプルな使用例です。

スタイル部分のみを「outset」に変更したシンプルな使用例です。

　特定の方向の線だけ、個別に線の種類を指定する場合は下記のようなプロパティを使用します。

CSS

p {
	padding: 20px 0;
	border: 10px #0188ff;
	border-top-style: solid;
	border-right-style: dotted;
	border-bottom-style: double;
	border-left-style: dashed;
}

これは、シンプルな使用例です。

　個別の線の種類を一括で指定する場合は下記のように記述しても同じ結果となります。

CSS

p {
	padding: 20px 0;
	border: 10px #0188ff;
	border-style: solid dotted double dashed; /* 上 右 下 左 */
}

これは、シンプルな使用例です。

　また、以下のような指定方法も有効です。

CSS

p {
	padding: 20px 0;
	border: 10px #0188ff;
	border-style: solid dotted double; /* 上 左右 下*/
}

これは、シンプルな使用例です。

CSS

p {
	padding: 20px 0;
	border: 10px #0188ff;
	border-style: solid dotted; /* 上下 左右*/
}

これは、シンプルな使用例です。

border-widthプロパティの値

「 border-width（ボーダーの太さの一括指定） 」を設定する場合と同様の値が指定できます。

数値で指定
数値に px や em や ex などの単位をつけて指定します。px とは１ピクセルを１とする単位で、実際に表示されるサイズは 72dpiや 96dpiといったモニタの解像度により変化します。また、em とはフォントの高さを１とする単位で、ex とは小文字の「x（エックス）」の高さを１とする単位です。なお、マイナスの値を指定することはできません。
キーワードで指定
thin（細い）、medium（普通）、thick（太い）のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。

　ここでは、「シンプルな使用例」の太さ部分のみを書き替えてどのように表示されるか見てみます。

CSS

p {
	border: 1px solid #0188ff;
}

/*
	border: 5px solid #0188ff;
	border: 10px solid #0188ff;
	border: 20px solid #0188ff;
*/

太さ部分を「 1px 」に指定した、シンプルな使用例です。

太さ部分を「 5px 」に指定した、シンプルな使用例です。

太さ部分を「 10px 」に指定した、シンプルな使用例です。

太さ部分を「 20px 」に指定した、シンプルな使用例です。

CSS

p {
	border: 0.5em solid #0188ff;
}

/*
	border: 1em solid #0188ff;
	border: 1.5em solid #0188ff;
	border: 2em solid #0188ff;
*/

太さ部分を「 0.5em 」に指定した、シンプルな使用例です。

太さ部分を「 1em 」に指定した、シンプルな使用例です。

太さ部分を「 1.5em 」に指定した、シンプルな使用例です。

太さ部分を「 2em 」に指定した、シンプルな使用例です。

CSS

p {
	border: 0.5ex solid #0188ff;
}

/*
	border: 1ex solid #0188ff;
	border: 1.5ex solid #0188ff;
	border: 2ex solid #0188ff;
*/

太さ部分を「 0.5ex 」に指定した、シンプルな使用例です。

太さ部分を「 1ex 」に指定した、シンプルな使用例です。

太さ部分を「 1.5ex 」に指定した、シンプルな使用例です。

太さ部分を「 2ex 」に指定した、シンプルな使用例です。

CSS

p {
	border: thin solid #0188ff;
}

/*
	border: medium solid #0188ff;
	border: thick solid #0188ff;
*/

太さ部分を「 thin 」に指定した、シンプルな使用例です。

太さ部分を「 medium 」に指定した、シンプルな使用例です。

太さ部分を「 thick 」に指定した、シンプルな使用例です。

　特定の方向の線だけ、個別に太さを指定する場合は下記のようなプロパティを使用します。

CSS

p {
	padding: 20px 0;
	border: solid #0188ff;
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

これは、シンプルな使用例です。

　個別の線の太さを一括で指定する場合は下記のように記述しても同じ結果となります。

CSS

p {
	padding: 20px 0;
	border: solid #0188ff;
	border-width: 1px 5px 10px 20px; /* 上 右 下 左 */
}

これは、シンプルな使用例です。

　また、以下のような指定方法も有効です。

CSS

p {
	padding: 20px 0;
	border: solid #0188ff;
	border-width: 1px 5px 10px; /* 上 左右 下 */
}

これは、シンプルな使用例です。

CSS

p {
	padding: 20px 0;
	border: solid #0188ff;
	border-width: 1px 5px; /* 上下 左右 */
}

これは、シンプルな使用例です。

border-colorプロパティの値

「 border-color（ボーダーの色の一括指定） 」を設定する場合と同様の値が指定できます。

色
ボーダーの色を RGB値（#000000などの記述）やカラーネーム（blackなど）で色を指定します。詳しい指定方法については「色の指定方法（単位）」を参照してください。
transparent
ボーダーの色を透明にします。ボックスに背景が適用されている場合は、背景が透けて見える状態になります。

　border-colorプロパティに色を指定すれば上下左右の線全てに色が付きます。

　「シンプルな使用例」の色の部分のみを書き替えてどのように表示されるか見てみます。

CSS

p {
	border: 10px solid #cc0000;
}

/*
	border: 10px solid #00ff00;
	border: 10px solid #0188ff;
*/

色の部分に「#cc0000」を指定した、シンプルな使用例です

色の部分に「#00ff00」を指定した、シンプルな使用例です

色の部分に「#0188ff」を指定した、シンプルな使用例です

CSS

p {
	border: 10px solid red;
}

/*
	border: 10px solid green;
	border: 10px solid blue;
*/

色の部分に「red」を指定した、シンプルな使用例です

色の部分に「green」を指定した、シンプルな使用例です

色の部分に「blue」を指定した、シンプルな使用例です

　特定の方向の線だけ、個別に色を指定する場合は下記のようなプロパティを使用します。

CSS

p {
	border: 10px solid;
	border-top-color: red;
	border-right-color: blue;
	border-bottom-color: green;
	border-left-color: yellow;
}

これは、シンプルな使用例です。

　個別の線の色を一括で指定する場合は下記のように記述しても同じ結果となります。

CSS

p {
	border: 10px solid;
	border-color: red blue green yellow; /* 上 右 下 左 */
}

これは、シンプルな使用例です。

　また、以下のような指定方法も有効です。

CSS

border-color: red blue green; /* 上 左右 下 */

これは、シンプルな使用例です。

CSS

border-color: red blue; /* 上下 左右 */

これは、シンプルな使用例です。

一部の線を非表示にする方法

　transparentを使用すると、枠線を非表示にすることができます。個別に指定することで一部だけ線を非表示にすることができます。

これは、シンプルな使用例です。

CSS

p {
	border: 10px solid;
	border-color: red transparent transparent blue;
}

基本的な例

　ボーダーに関連するプロパティの値をまとめて指定した例です。

CSS

p {
	margin: 1.5em 3em;
	padding: 0.3em;
	text-align: center;
}
.c1 { border: 2px solid #3498db }
.c2 { border: 4px dashed #336699 }
.c3 { border: 3px double #2ecc71 }
.c4 { border: 4px dotted #e67e22 }
.c5 {
	border: 2px outset #f39c12;
	color: #2c3e50;
	background: #f1c40f;
}
.c6 {
	border: 2px inset #e74c3c;
	color: #ffffff;
	background: #3498db;
}
.c7 {
	border: 3px groove #9b59b6;
	color: #2c3e50;
	background: #ecf0f1;
}
.c8 {
	border: 4px ridge #34495e;
	color: #ffffff;
	background: #16a085;
}

HTML

<p class="c1">border: 2px solid #3498db</p>
<p class="c2">border: 4px dashed #336699</p>
<p class="c3">border: 3px double #2ecc71</p>
<p class="c4">border: 4px dotted #e67e22</p>
<p class="c5">border: 2px outset #f39c12</p>
<p class="c6">border: 2px inset #e74c3c</p>
<p class="c7">border: 3px groove #9b59b6</p>
<p class="c8">border: 4px ridge #34495e</p>

border: 2px solid #3498db

border: 4px dashed #336699

border: 3px double #2ecc71

border: 4px dotted #e67e22

border: 2px outset #f39c12

border: 2px inset #e74c3c

border: 3px groove #9b59b6

border: 4px ridge #34495e

フォームへの適用例

　ボーダーに関連する値を、メニュー、入力フィールド、ボタンに適用した例です。

CSS

form {
	padding: 1em 0;
}
select {
	margin-bottom: 1em;
}
textarea {
	margin: 1em 0;
}
input {
	border: 2px outset #2ecc71; /* 浮き出しの境界 */
	padding: 10px 15px; /* 内部余白（上下 左右） */
	border-radius: 6px; /* 角の丸み */
}
select, .field {
	border: 2px solid #3498db; /* 実線の境界 */
	padding: 8px; /* 内部余白 */
	border-radius: 4px; /* 角の丸み */
}

HTML

<form>
	<select>
		<option>select 要素</option>
		<option>選択肢２</option>
	</select>
	<br>
	<input type="text" value="input 要素" class="field">
	<br>
	<textarea rows="3" cols="20" class="field">textarea 要素</textarea>
	<br>
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>



Sample 1

シンプルなボーダー

HTML

<p>シンプルなボーダー</p>

CSS

p {
    padding: 20px;
    border: solid 2px #3498db;
    margin-bottom: 20px;
}

Sample 2

ボーダーの角を丸く

HTML

<p>ボーダーの角を丸く</p>

CSS

p {
	padding: 20px;
	border: dashed 3px #e74c3c;
	border-radius: 20px;
	margin-bottom: 20px;
}

Sample 3

影付きのボーダー

HTML

<p>影付きのボーダー</p>

CSS

p {
	padding: 20px;
	border: solid 3px #2ecc71;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
	margin-bottom: 20px;
}

Sample 4

グラデーションボーダー

HTML

<p>グラデーションボーダー</p>

CSS

P {
	padding: 25px;
	border: solid 5px;
	border-image: linear-gradient(45deg, #3498db, #2ecc71);
	border-image-slice: 1;
	margin-bottom: 20px;
}

Sample 5

アニメーション付きボーダー

HTML

<p>アニメーション付きボーダー</p>

CSS

@keyframes borderAnimation {
	0% { border-color: #3498db; }
	50% { border-color: #e74c3c; }
	100% { border-color: #3498db; }
}

p {
	border: 2px solid #3498db;
	animation: borderAnimation 4s infinite;
	padding: 15px;
}

Sample 6

アニメーション付きボーダー２

HTML

<p>アニメーション付きボーダー２</p>

CSS

p {
	padding: 30px;
	border: solid 2px transparent;
	background: linear-gradient(45deg, #3498db, #2ecc71);
	background-clip: padding-box;
	border-image: linear-gradient(45deg, #3498db, #2ecc71);
	border-image-slice: 1;
	animation: borderAnimation 3s infinite alternate;
	margin-bottom: 20px;
}

@keyframes borderAnimation {
	0% {
		border-width: 2px;
	}
	100% {
		border-width: 10px;
	}
}

Sample 7

カスタムボーダーパターン

HTML

<p>カスタムボーダーパターン</p>

CSS

p {
	padding: 20px;
	border: solid 10px transparent;
	background: repeating-linear-gradient(45deg, #3498db, #3498db 10px, #2ecc71 10px, #2ecc71 20px);
	border-radius: 15px;
	margin-bottom: 20px;
}

Sample 8

色付きの枠線と影

HTML

<div class="container">
	<div class="box">色付きの枠線と影</div>
</div>

CSS

.container {
	background-color: #ffffff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	margin: 30px auto;
	max-width: 600px;
	padding: 20px;
}
	
.box {
    border: 3px solid #3498db;
    border-radius: 10px;
    color: black;
    margin: auto;
    padding: 15px;
}

Sample 9

アニメーションつきゲーム風フレーム

HTML

<p>アニメーションつきゲーム風フレーム</p>

CSS

@keyframes gameFrameAnimation {
	0% { border-color: #e74c3c; transform: rotate(0deg); }
	50% { border-color: #3498db; transform: rotate(5deg); }
	100% { border-color: #e74c3c; transform: rotate(0deg); }
	}

p {
	border: 8px solid #e74c3c;
	border-radius: 15px;
	animation: gameFrameAnimation 3s infinite;
	padding: 15px;
}