デザインに重要！CSSで線を引くborderプロパティについてのまとめ

2020年12月9日 2020年12月9日

各要素の周りには線をつけることができます。それがborderプロパティです。

線は、太さや色、線種などをカスタマイズできますし、上・下・左・右と部分的に引くこともできます。好みのスタイルにデザインしましょう。

CSSを書く場所はこちらを参考にしてください。

上下左右の線をすべて同じにする場合

HTML：class名thin-red

<p class="thin-red">このように細い、赤色の、実線で囲まれます。</p>

CSS

.thin-red {
    border: thin red solid;
}

このように細い、赤色の、実線で囲まれます。

HTML：class名thick-blue

<p class="thick-blue">このように太い、青色の、破線で囲まれます。</p>

CSS

.thick-blue {
    border: 3rem blue dashed;
}

このように太い、青色の、波線で囲まれます。

CSSの書き方は.class名{border:太さ色線種;}と書きます。太さ。色、線種の順番に指定はありません。

HTML

<p class="bdr-b">下線だけを太い青色の実線が引ける</p>

CSS

.bdr-b {
    border-bottom:thick blue solid;
}

下線だけを太い青色の実線が引ける

HTML

<p class="bdr-bl">左側に3pxの青色実線、下線に1pxの青色点線が引ける</p>

CSS

.bdr-bl {
    border-bottom: 1px blue dotted;
    border-left: 3px blue solid;
}

左側に3pxの青色実線、下線に1pxの青色点線が引ける

例のように、上側に選を引きたい場合はプロパティに「border-top」、同様に右側は「border-right」。下線は「border-bottom」、右側は「border-right」を使って、太さ、色、線種、の書き方は上と同様になります。

ここでは、「border-weight(線の太さ)」、「border-style(線種)」、「border-color(線の色)」プロパティを使ってCSSを書く方法を紹介します。

HTML

<p class="test1">上2px、右4px、下6px、左8pxの青色実線が引ける</p>

CSS

.test1 {
    border-width: 2px 4px 6px 8px;
    border-color: blue;
    border-style: solid;
}

上2px、右4px、下6px、左8pxの青色実線が引ける

HTML

<p class="test2">上2px青色実線、右4px赤色破線、下6px緑色点線、右8px黒色二重線が引けます</p>

CSS

.test2 {
    border-width: 2px 4px 6px 8px;
    border-color: blue red green black;
    border-style: solid dashed dotted double;
}

上2px青色実線、右4px赤色破線、下6px緑色点線、右8px黒色二重線が引けます

上の例のように「{プロパティ: 上右下左;}」の形で４方向の線が指定できます。

他にも「{プロパティ: 上下左右;}」で上下と左右をまとめて指定したり、「「{プロパティ: 上左右下;}」」のように表記したりもできます。

borderプロパティの考え方は、基本的に、太さ、色、線種で構成されていますから、どの書き方でも構いませんのでそのあたり自分なりの書き方の法則を作っておくとよいかもしれませんね。