top画像（トマト）

ボーダーの種類と使い方

borderは8種類あります。
けど、実線・破線・点線以外はほとんど使ってる人を見たことないです。
ですがあえてここでborderの応用とか説明しちゃいたいと思います。

実は実用的なborder

solid　実線

dashed　破線

dotted　点線

double　二重線

ridge　浮き出た感じの線

groove　くぼんだ感じの線

outset　罫線で囲まれた部分が浮き出て見える線

inset　 罫線で囲まれた部分がくぼんで見える線

double　二重線

二重線は、1pxでは使いません。二重な線なのに1pxじゃ一本の線に見えるから。

ここまで太くしたらよく二重線が見えます。

お知らせ

こんな感じで使えば可愛いんじゃないかなって思います。

ridge　浮き出た感じの線

これはあれだ…!。黒板しかないでしょ

まあ黒板風ナビとかにも使えそうですね。

groove　くぼんだ感じの線

上のdoubleの反対にへこんだ版かよ…
とばします

outset　罫線で囲まれた部分が浮き出て見える線

なんかこの影の形、押せそうな気がしますよね。

ボタンです

これは、ボタンしかないでしょ。
これでhoverとうまくあわせたら画像、inputなしのボタンが出来ちゃいますね。

ボタンです

inset　 罫線で囲まれた部分がくぼんで見える線

これは使えないなあ…。
使い方が分からないや。理由は影で。