CSS の border-style 一覧

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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

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

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

border-style

Table of contents

スタイル一覧

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

up

サンプル

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT