2021/01/03

CSSのborderの太さと種類、色の指定方法【現役エンジニアが解説】

PROGRAM

今回は、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ピクセル)で引いています。

• facebook
• Tweet
• Read Later