borderプロパティのメモ

何気なーく使ってるborderプロパティですが、どんな値がつけれるかはイマイチ覚えてなかったので。

そして意外に使えるやつを発見したのでメモ！

borderプロパティ

言うまでもなく、罫線引くアレです。
そのスタイルを決める値に、思わぬ伏兵がおりました。

ridge, groove

<p style="border:10px ridge black">なんか凸な感じの</p>

なんか凸な感じの

<p style="border:10px groove gray">なんか凹んだ感じの</p>

なんか凹んだ感じの

inset,outset

<p style="border:10px inset blue">↑と←が暗い</p>

↑と←が暗い

<p style="border:10px outset white">↓と→が暗い</p>

↓と→が暗い

ほかにも

doubleを指定すれば二重線、dottedで点線、dashedで破線などなど、意外にデザインに使えるなーと。
画像貼るより軽いし。

参考：border－スタイルシートリファレンス