ボックスの枠線を指定する

border-style:
	none|dotted|dashed|solid|double|groove|ridge|inset|outset
	[none|dotted|dashed|solid|double|groove|ridge|inset|outset
	 [none|dotted|dashed|solid|double|groove|ridge|inset|outset
	  [none|dotted|dashed|solid|double|groove|ridge|inset|outset]]]
;
指定する数によって、
２つなら上下、左右の順、
３つなら上、左右、下の順
４つなら上、右、下、左の順に指定します。
個別に設定する事もできます。
border-top-style:上の枠線;
border-bottom-style:下の枠線;
border-left-style:左の枠線;
border-right-style:右の枠線;
設定する値は同じです。

戻る

div{border-style:none}

div{border-style:dotted}

div{border-style:dashed}

div{border-style:solid}

div{border-style:double}

div{border-style:ridge}

div{border-style:groove}

div{border-style:outset}

div{border-style:inset}

pre{
	border-style:
		ridge
		double;
}

pre{
	border-style:
		ridge
		double
		solid;
}

pre{
	border-style:
		ridge
		double
		solid
		outset;
}

pre{
	border-top-style:ridge;
	border-right-style:double;
	border-bottom-style:solid;
	border-left-style:outset;
}

このページのサンプルはすべて次のスタイルを継承しています。

.bordersample{
	background-color:lightcyan;
	border-style:solid;
	border-color:green;
	border-width:8px
}