CSSのborderの太さと種類、色の指定方法【現役エンジニアが解説】
今回は、CSSのborderの太さと種類、色の指定方法について、個別に指定する場合とまとめて指定する場合に分け、簡単に解説していきます。
個別に指定
border-widthプロパティで枠線の太さを指定できます。
また、border-styleプロパティで種類、border-colorプロパティで色も変更できます。
.hoge{ border-width:1px; border-style:solid; border-color:#000000; }
上記のコードでは、hogeというクラスを持つ要素に1ピクセルの実線の黒色の枠線を個別指定で引いています。
まとめて指定
borderプロパティで枠線の太さと種類、色をまとめて指定可能です。
いずれも順不同で指定することができ、一行だけで指定できるため、部分的変更でない限りは便利です。
.hoge{ border:1px solid #000000; }
上記のコードでは、hogeというクラスを持つ要素に1ピクセルの実線の黒色の枠線をまとめて指定して引いています。
borderを角丸にする
border-radiusプロパティを使うことで、枠線を角丸にすることができます。
このプロパティの値の指定方法は「左上と右上、右下、左下」や「左上右下と右上左下」、「四隅」の3種類です。
.hoge{ border:1px solid #000000; border-radius:40px 30px 20px 10px; /* 角丸 */ }
上記のコードでは、hogeというクラスを持つ要素に1ピクセルの実線の黒色の枠線をまとめて指定し、角丸(左上40ピクセル、右上30ピクセル、右下20ピクセル、左下10ピクセル)で引いています。