WEBサイトで枠線を付けるborderプロパティ。
borderプロパティには線の太さ、種類、色を指定することが出来ます。
この記事では様々な枠線の指定の仕方をご紹介します。

この記事で使用するHTMLの構造は以下となります。

<div class="box">【CSS】borderプロパティで枠線を引く方法</div>

borderプロパティの基本

borderプロパティの基本的な使い方は以下になります。
それぞれのプロパティをまとめて指定することが出来ます。

セレクタ {
    border: 線の太さ 線の種類 線の色;
}

この指定方法をもとに以下のように指定します。

.box {
    border: 1px solid black;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

borderプロパティの指定方法

続いて、それぞれ別々に指定する方法をご紹介します。

枠線の色を指定する

枠線の色だけを指定する場合は以下のように指定します。

プロパティ {
    border-color: 線の色;
}

この指定方法をもとに以下のように指定します。

.box {
    border: 1px solid;
    border-color: black;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上下左右それぞれ指定する

上下左右それぞれ別々に指定する場合は以下のように指定します。

.box {
    border: 1px solid;
    border-top-color: red;
    border-right-color: yellow;
    border-bottom-color: green;
    border-left-color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくは一括して指定する場合は以下のように指定します。
指定の順番は「上」→「右」→「下」→「左」になります。

.box {
    border: 1px solid;
    border-color: red yellow green blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

枠線の種類を指定する

枠線の種類だけを指定する場合は以下のように指定します。

プロパティ {
    border-style: 線の種類;
}

この指定方法をもとに以下のように指定します。

.box {
    border: 1px black;
    border-style: solid;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

枠線の種類の紹介

枠線は様々なものが用意されています。

solid：実線

.box {
    border: 1px black;
    border-style: solid;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

dashed：破線

.box {
    border: 1px black;
    border-style: dashed;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

dotted：点線

.box {
    border: 1px black;
    border-style: dotted;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

double：二重線

二重線の場合は線の太さを3px以上にする必要があります。

.box {
    border: 3px black;
    border-style: double;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

groove：へこんだ印象の線1

grooveの場合は線の太さを2px以上にする必要があります。

.box {
    border: 6px black;
    border-style: groove;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

inset：埋め込まれたような印象の線2

insetの場合は線の太さを2px以上にする必要があります。

.box {
    border: 6px black;
    border-style: inset;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ridge：突き出た印象の線1

ridgeの場合は線の太さを2px以上にする必要があります。

.box {
    border: 6px black;
    border-style: ridge;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

outset：突き出た印象の線2

outsetの場合は線の太さを2px以上にする必要があります。

.box {
    border: 6px black;
    border-style: outset;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上下左右それぞれ指定する

上下左右それぞれ別々に指定する場合は以下のように指定します。

.box {
    border: 3px black;
    border-top-style: solid;
    bordder-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: double;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

★実行結果

もしくは一括して指定する場合は以下のように指定します。
指定の順番は「上」→「右」→「下」→「左」になります。

.box {
    border: 1px black;
    border-style: solid dashed dotted double;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

枠線の太さを指定する

枠線の太さだけを指定する場合は以下のように指定します。

プロパティ {
    border-width: 線の太さ;
}

この指定方法をもとに以下のように指定します。

.box {
    border: solid black;
    border-width: 1px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上下左右それぞれ指定する

上下左右それぞれ別々に指定する場合は以下のように指定します。

.box {
    border: solid black;
    border-top-width: 1px;
    bordder-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 4px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくは一括して指定する場合は以下のように指定します。
指定の順番は「上」→「右」→「下」→「左」になります。

.box {
    border: solid black;
    border-width: 1px 2px 3px 4px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

今回の記事ではborderプロパティの使い方をご紹介しました。
調べるとこんな線の種類もあったのかと初めて知る指定方法もありました。
borderプロパティを駆使して効率的にWEB制作を進めていきたいですね。