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

このような四角形があるとします。

やり方

border: 1px solid #0000000;のように指定します。

1pxで線の太さ

solid で線の種類

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

今回はわかりやすいように線の太さを20pxにして表示してみます。

border: 20px solid #0000000;

すると

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

続いて下にだけ線を引きたい場合

border-bottom: 20px solid #000000;と指定します。

borderの後に線を引きたい位置を指定します。

（bottomのところをtop,right,leftに変えることで、それぞれの位置に指定できます。）

すると

このように四角形の下にだけ線を引くことができます。