今回は枠線を作成するborderプロパティについて解説いたします。
Webサイト制作では枠線を使用したデザインが多々あるため、boderプロパティは頻繁に使用します。
borderプロパティでできること
枠線の太さ、色、線の種類の制御が可能です。
Webサイトのデザインに合わせて、値を調整していきます。
border-width 線の太さ
枠線の太さを指定するプロパティです。
主にpxで単位を指定します。
border-width: 1px;border-color 線の色
枠線の色を指定するプロパティです。
border-color: #555555;色の指定方法は、カラーコード（ 例：#555555 ）で指定する方法と、RGBA（ 例：rgba(255,255,255,0.5) ）で指定する方法があります。
border-style 線の種類
枠線の種類を指定するプロパティです。線の種類はたくさんありますが、主に以下の４つを使用することが多いです。
border-style: solid; /* 実線 */
border-style: dotted; /* 点線 */
border-style: double; /* 二重線 */
border-style: dashed; /* 破線 */
2重線を使用する場合は、線の太さ（border-width）は3px以上にする必要があります。
1pxにすると、2重線を出力する領域が足りないため、実線で表示されます。
2pxの場合、線と線の間隔が無い状態となり、太線のような形になってしまいます。
borderプロパティの指定をまとめて行う方法
borderプロパティは以下のようにまとめて指定することも可能です。
1行で記載できることから、コードを短くすることができます。
実際にはこちらの記載方法で指定することが多いです。
border: 1px solid #555555;太さ、線の種類、色を一気に指定することが可能です。このように1行でまとめて記載する方法はショートハンドと呼ばれます。
それぞれ記載する順番に決まりはありませんが、統一させた方が視認性も良くなりますので、私は上記の順番で記載するようにしております。
4辺の個別に指定する方法
上下左右の線をそれぞれ指定することも可能です。
border-top: 1px solid #555555;
border-right: 1px dotted red;
border-bottom: 3px double green;
border-left: 1px dashed blue;
4辺それぞれに違う種類の線を指定することは、ほぼないかと思われますが、このように4辺わけて指定することも可能です。
枠線に丸みを持たせる方法
border-radius
border-radiusプロパティを指定することによって、角に丸みを持たせることが可能です。
border-radius: 10px;
さいごに
borderプロパティ文章の枠線に使用したり、ボタンのデザインで使用したりなど、非常に便利なプロパティです！
Webサイト制作では必ずと言っていいほど使用するプロパティのため、ぜひこの機会に使いこなせるように頑張っていきましょう！
