div要素にくぼんだ枠線 grooveをつけるときの注意点。

今回はdiv要素のくぼんだ枠線をつけるにあたって私の初歩的なミスをした点を復習でアップいたします。

##【先に今回の結論】
###borderを使う時は大きい数字を使用し、徐々に数字を下げていくこと

まず、完成サンプルはこんな感じにしようと考えております。

ー見本ー

オレンジ色で設定する形です。

書き方はこのようにしました。

index.html

<div class = "groove">
くぼんだ線
</div>

style.css

.groove{
    border: 2px groove #orange;
    text-align: center;
    padding: 5px 10px 5px 10px;
    width:500px;
}

なお、borderの書き方は
・ 第１引数に線の太さ
・ 第２引数に線の種類（今回はgroove）
・ 第３引数に線の色

になります。

これで、表示するとこんな感じになってしまいました。

あれっ？　隆起してない？
ただの線になってないか？

なんでこのような形になったかというと、

線の太さが小さすぎたからになります。
そこで線の太さを２pxから４pxに変更してみました。

style.css

.groove{
    border: 4px groove #orange;
    text-align: center;
    padding: 5px 10px 5px 10px;
    width:500px;
}

結果はこんな感じ

やや、後ろに影みたいに出来上がり来ました。
これくらいの数字でgrooveが使えているように感じてきました。

最終的には10pxでやったら一番最初の見本のようになりました。

style.css

.groove{
    border: 10px groove #orange; 　//borderを2pxから10pxに変更
    text-align: center;
    padding: 5px 10px 5px 10px;
    width:500px;
}

まとめると、
borderを使う時は、枠線のサイズを大きめからスタートして徐々に小さくすることをお勧めします。
今回のトラブルは以外にも盲点だったなと思います。

以上です。