お知らせ / ブログINFO / BLOG

2019.11.07

【CSS】borderの線種別紹介

使用する頻度の高いborderですが、普段使用する線種は限られていると思います。
普段使用しない線種を使用する際の備忘録も兼ねて掲載致します。

実線(solid)

実線(solid)
.solid {
	border:4px solid #4fa0ca;
}

最もオーソドックスで一番使用頻度が高い線です。

点線(dotted)

点線(dotted)
.dotted {
	border:4px dotted #4fa0ca;
}

この点線も使用頻度は高いですね。太さを1px~4pxぐらいで使用する事が多いと思います。

破線(dashed)

破線(dashed)
.dashed {
	border:4px dashed #4fa0ca;
}

破線の太さは小さい目で設定するのでスマートです。

二重線(double)

二重線(double)
.double {
	border:4px double #4fa0ca;
}

線の太さを指定しない場合は大丈夫なのですが、太さを指定するとブラウザ間で表示の差があります。
癖があり、統一も難しいので二重線を設定したい場合は、ブロックを入れ子にして各ブロックに設定する方がよさそうです。

谷型(groove)

谷型(groove)
.groove {
	border:4px groove #4fa0ca;
}

凹んだように見える線を表示します。ridgeの逆となります。

山型(ridge)

山型(ridge)
.ridge {
	border:4px ridge #4fa0ca;
}

出っ張ったように見える境界線を表示します。grooveの逆となります。

立体型(inset)

立体型(inset)
.inset {
	border:4px inset #4fa0ca;
}

上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。

立体型(inset)

立体型(outset)
.outset {
	border:4px outset #4fa0ca;
}

上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。

これらの線種を使用し、上下左右別々の線種の設定も可能です。

ページトップに戻る