[CSS] ボーダー(Border)を指定する

ボーダーは、パディングとマージンの境界で四辺が表示できます。ボーダーの太さ、線種、色をそれぞれ指定します。一括で指定することもできます。

ボーダーの領域は背景が表示されますが、ボーダーが指定されている場合は、ボーダーが優先的に表示されます。

ボーダーの種類

上下左右の境界線のスタイルを一括で指定します。ボーダーの種類には、1本線、2本線、破線、点線などがあります。

border:太さ線種色;

<style>
　.solid {border:2px solid #F0F;}
　.dashed {border:2px dashed #F0F;}
　.double {border:5px double #F0F;}
　.ridge {border:8px ridge #F0F;}
　.groove {border:8px groove #F0F;}
　.inset {border:8px inset #F0F;}
　.outset {border:8px outset #F0F;}
　.dotted {border:2px dotted #F0F;}
</style>

none	表示しない。
solid	1本線(実線)で表示する。
dashed	破線で表示する。
double	2本線(二重線)で表示する。
ridge	飛び出して見える(浮きだし)ように表示する。
groove	へこんで見えるように表示する。
inset	ボーダーの内側がへこんで見えるように凹型に表示する。
outset	ボーダーの内側が飛び出して見えるように凸型に表示する。
dotted	点線で表示する。
hidden	表示しない。(ボーダーが重なる場合に優先される)

border-styleを個別に指定する

一つのボックスの上下左右の境界線にボーダースタイルを個別に指定します。上下左右の部分に、それぞれtop、right、bottom、leftが入ります。

border-styleプロパティの初期値がnoneとなっているため、ボーダーは太さや色だけを指定しても表示されないので、ボーダーを表示させるには、太さや色だけでなく種類も同時に指定する必要があります。

border-上下左右-style：値;

<style>
 .bordering{
	border-top-style: double;
    border-bottom-style: dotted;
    border-left-style: solid; 
    border-right-style: outset;
 　}
</style>

　sample

border-styleをまとめて指定する

ボーダーは、ボーダーの種類をまとめて指定することができます。上下左右のボーダーの種類の値を半角スペースで区切って任意の順序で指定します。以下の4パターンで表記します。

border-style：値;

<style>
 .border1{border-style: solid;} /*上下左右*/
 .border2{border-style: solid double;} /*上下・左右*/
 .border3{border-style: solid dotted double;} /*上・左右・下*/
 .border4{border-style: solid dotted double dashed;} /*上・右・下・左*/
</style>

　sample

border-styleの色を個別に指定する

ボーダーの色を指定する値は、16進数表記、RGBを10進数で表します。ボーダーの色を指定するには、ボーダーの種類も指定する必要があります。

border-上下左右-color：値;

<style>
 .border{
	border-top-color:#F00;
	border-bottom-color:#0C0;
	border-left-color:#000;
	border-right-color:#00F;
	border-style:solid;
	border-width: 10px;
 　}
</style>

　sample

border-styleの色をまとめて指定する

ボーダーの色を指定する値は、16進数表記、RGBを10進数で表します。ボーダーの色を指定するには、ボーダーの種類も指定する必要があります。以下の4パターンで表記します。

種類	指定方法	記述例
16進数	RGB値を16進数で1行か2行で指定する	#fff　or　#ffffff
rgb(R,G,B)	RGBを10進数で指定する	rgb(90,0,45)
rgb(R%,G%,B%)	RGBをパーセンテージ(％)で指定する	rgb(90%,0%,45%)
色名	色の名前で指定	red

border-上下左右-color：値;

<style>
 .border1{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00;} /*上下左右*/
 .border2{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00 0C0;} /*上下・左右*/
 .border3{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00 #0C0 red;} /*上・左右・下*/
 .border4{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00 #0C0 red #3300ff;} /*上・右・下・左*/
</style>

　sample