CSS

Cascading Style Sheets border property.

border

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

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

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

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

HTML source


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

CSS source


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

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

CSS source


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

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

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

書式
border: 値(複数可)
適用対象
すべての要素
初期値
各プロパティの初期値
値の継承
しない
指定できる値
border-color プロパティの値
ボーダーの色 」を設定する場合と同様の値が指定できます。
border-width プロパティの値
ボーダーの太さ 」を設定する場合と同様の値が指定できます。
border-style プロパティの値
ボーダーのスタイル 」を設定する場合と同様の値が指定できます。

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

 または、

 で、指定してください。

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

border-style プロパティの値

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

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

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

CSS source


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

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

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

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

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

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

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

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

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

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

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

border-width プロパティの値

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

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

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

CSS source


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

border-color プロパティの値

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

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

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

CSS source


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

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

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

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

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

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

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

基本的な例

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

CSS source


p {
	margin: 1.5em 3em;
	padding: 0.3em;
	text-align: center;
}
.c1 { border: 1px solid #999999 }
.c2 { border: 1px dashed #336699 }
.c3 { border: 3px double #ff3300 }
.c4 { border: 4px dotted #ff9900 }
.c5 {
	border: 6px outset #cc9900;
	color: #000000;
	background: #ffcc00;
}
.c6 {
	border: 6px inset #ffcc00;
	color: #ffffff;
	background: #cc9900;
}
.c7 {
	border: 6px groove #009966;
	color: #000000;
	background: #ffff00;
}
.c8 {
	border: 6px ridge #ffff00;
	color: #ffffff;
	background: #006600;
}

HTML source


<p class="c1">border: 1px solid #999999</p>
<p class="c2">border: 1px dashed #336699</p>
<p class="c3">border: 3px double #ff3300</p>
<p class="c4">border: 4px dotted #ff9900</p>
<p class="c5">border: 6px outset #cc9900</p>
<p class="c6">border: 6px inset #ffcc00</p>
<p class="c7">border: 6px groove #009966</p>
<p class="c8">border: 6px ridge #ffff00</p>

Sample

border: 1px solid #999999

border: 1px dashed #336699

border: 3px double #ff3300

border: 4px dotted #ff9900

border: 6px outset #cc9900

border: 6px inset #ffcc00

border: 6px groove #009966

border: 6px ridge #ffff00

フォームへの適用例

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

CSS source


textarea { margin-top: 1em; }
input {
	border: 4px outset #ff3300;
}
select, .field {
	border: 4px groove #009900;
}

HTML source


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

Sample