CSS

The CSS border-style property is used to specify the style of an element's border, where dotted represents a dotted line, dashed represents a dashed line, and solid represents a solid line.

border-style

　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」でテーブルを構成する枠の種類が競合する場合は、この値が優先されます。

　値は半角スペースで区切って 4つまで指定できます。指定した個数によって、次のように適用されます。

値を１個指定した場合

この段落の border-style には、値を１個指定しています。

HTML

<p class="c1">この段落の border-style には、値を１個指定しています。</p>

CSS

p {
	margin: 1.5em 2em;
	padding: 0.3em;
	border: 10px #ff3300;
	font-weight: bold;
	text-align: center;
}

.c1 {
	border-style: solid;
}

値を２個指定した場合

この段落の border-style には、値を２個指定しています。

HTML

<p class="c2">この段落の border-style には、値を２個指定しています。</p>

CSS

p {
	margin: 1.5em 2em;
	padding: 0.3em;
	border: 10px #ff3300;
	font-weight: bold;
	text-align: center;
}

.c2 {
	border-style: solid double;
}

値を３個指定した場合

この段落の border-style には、値を３個指定しています。

HTML

<p class="c3">この段落の border-style には、値を３個指定しています。</p>

CSS

p {
	margin: 1.5em 2em;
	padding: 0.3em;
	border: 10px #ff3300;
	font-weight: bold;
	text-align: center;
}

.c3 {
	border-style: solid double dashed;
}

値を４個指定した場合

この段落の border-style には、値を４個指定しています。

HTML

<p class="c4">この段落の border-style には、値を４個指定しています。</p>

CSS

p {
	margin: 1.5em 2em;
	padding: 0.3em;
	border: 10px #ff3300;
	font-weight: bold;
	text-align: center;
}

.c4 {
	border-style: solid double dashed dotted;
}

基本的な例

　各段落のボーダーに、それぞれ異なる種類を指定した例です。

solid

double

dotted

dashed

inset

outset

groove

ridge

HTML

<p class="c5">solid</p>
<p class="c6">double</p>
<p class="c7">dotted</p>
<p class="c8">dashed</p>
<p class="c9">inset</p>
<p class="c10">outset</p>
<p class="c11">groove</p>
<p class="c12">ridge</p>

CSS

p {
	margin: 1.5em 2em;
	padding: 0.3em;
	border: 10px #ff3300;
	font-weight: bold;
	text-align: center;
}

.c5 {
	border-style: solid;
}

.c6 {
	border-style: double;
}

.c7 {
	border-style: dotted;
}

.c8 {
	border-style: dashed;
}

.c9 {
	border-style: inset;
}

.c10 {
	border-style: outset;
}

.c11 {
	border-style: groove;
}

.c12 {
	border-style: ridge;
}

背景を適用した例

　ボーダーの種類と背景の関係を示す例です。double、dotted、dashed では、ボーダー領域にもボックスの背景が適用されています。inset の背景には暗い色を、outset の背景には明るい色を指定すると、より立体的に見せることができます。

solid

double

dotted

dashed

inset

outset

groove

ridge

HTML

<div>
	<p class="c13">solid</p>
	<p class="c14">double</p>
	<p class="c15">dotted</p>
	<p class="c16">dashed</p>
	<p class="c17">inset</p>
	<p class="c18">outset</p>
	<p class="c19">groove</p>
	<p class="c20">ridge</p>
</div>

CSS

div {
	background-color: #ffcc00;
	padding: 0.5em;
}

p {
	margin: 1.5em 2em;
	padding: 0.3em;
	border: 10px #ff3300;
	font-weight: bold;
	text-align: center;
	background-color: #ffffff;
	color: #0a0a0a; /* ダークモード対策 */
}

.c13 {
	border-style: solid;
}

.c14 {
	border-style: double;
}

.c15 {
	border-style: dotted;
}

.c16 {
	border-style: dashed;
}

.c17 {
	border-style: inset;
	background-color: #e0bb00;
}

.c18 {
	border-style: outset;
	background-color: #ffdd00;
}

.c19 {
	border-style: groove;
	background-color: inherit;
}

.c20 {
	border-style: ridge;
	background-color: inherit;
}