CSS の border-style って何があるのかって実は把握してなかったりします. ほぼ solid しか使わないし, たまーに dotted を使う程度.

どんなボーダースタイルがあるのか気になったのでまとめてみました.

サンプルは jsdo.it で作ってあるので, 実際に動かしたり fork して遊んでみて下さい.

Table of contents

• スタイル一覧
• サンプル

スタイル一覧

スタイル名	説明
none	ボーダーを表示せず, 太さも 0 になります.(デフォルト)
hidden	ボーダーを表示せず, 太さも 0 になります.
solid	1本線を表示する
double	2本線を表示する
groove	立体的に凹んだ線を表示する
ridge	立体的に凸線を表示する
inset	凹んだ線を表示する
outset	凸んだ線を表示する
dashed	破線を表示する
dotted	点線を表示する

up

サンプル

up