今回の記事では要素の線を引くやり方を紹介いたします。

この要素の周りを線で囲みたいとします。

やり方

border: 1px solid #000000;と指定します。

1pxで線の太さ

solidで線の種類

#000000で線の色を指定しています。

今回はborder: 2px solid #4571E3;と指定してみます。

その結果

このように周りに線を引くことができます。

続いて要素の下にだけ線を引きたい場合。

border-bottom: 1px solid #4571E3;とします。

このように下線を引くことができます。

bottomのところをtop、left、rightと指定することでそれぞれの方向に線を引くことも可能です。