【HTML&CSS】borderの長さを指定する方法を解説！

どうも皆さんこんにちは！kwです！

今回は、border（線）の長さを指定する方法を解説していきます！

borderプロパティについて詳しく触れている自分の記事があるので、是非そちらを見てから今回の記事を見ることを推奨します！

borderプロパティについて詳しく触れている記事↓

「borderプロパティについては概ね理解できたけど、borderの長さってどうやって変えるの？」という方が大半だと思います。

実はborderの長さを変えるのはとても簡単で、CSSで一行だけとある文を記述してあげるだけで自由に長さを指定することができてしまうんです！

ということで、早速やっていきましょう！

borderの長さを変えるには、CSSのwidthプロパティと、heightプロパティを使ってあげます。

widthプロパティとは？

要素の横幅を自由に指定することができるプロパティである。
単位は"px"である。

heightプロパティとは？

要素の縦幅を自由に指定することがでいるプロパティである。

単位は"px"である。

本来は、要素の横幅、縦幅を指定するwidthプロパティ、heightプロパティですが、今回はborderの長さを指定するのに使います。

実際に例を見てみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

簡単ですね！

このように、width,heightプロパティを使うことでborderの長さを指定することができます。

いかがでしたか？

borderプロパティの長さを変更する場面は、webサイトを作っていく上でよく使う技術なので、まだ覚えてない方は是非、覚えておいてください！

ということで今回も、最後まで見てくれた方、ありがとうございました！

分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。

ぜひ、お手隙の際に他の記事もご覧ください！