このページでは、borderプロパティの知識を前提として、下表のCSSプロパティの解説をする。

CSSプロパティ対象
border-top上辺の線
border-right右辺の線
border-bottom下辺の線
border-left左辺の線
border-style線の種類
border-width線の太さ
border-color線の色
border-top-style上辺の種類
border-top-width上辺の太さ
border-top-color上辺の色
border-right-style右辺の種類
border-right-width右辺の太さ
border-right-color右辺の色
border-bottom-style下辺の種類
border-bottom-width下辺の太さ
border-bottom-color下辺の色
border-left-style左辺の種類
border-left-width左辺の太さ
border-left-color左辺の色

このページで解説するコードの実行結果。

top
right
bottom
left
base
base
dotted
base
thin
base
green
上辺と下辺を細くして
右辺と下辺を少し濃い色にする
red
blue
green

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    margin:             8px;            /*  外側の余白  */
    padding:            8px 12px;       /*  内側の余白  */
    display:            inline-block;   /*  横並び  */
    vertical-align:     middle;         /*  上下中央揃え  */
    background-color:   #eff;           /*  背景色  */
}

概要

まず、目的を明確にする。

  • 上下左右の「1辺のみ」に線を付けたいのか
  • 上下左右の「2辺以上」に線を付けたいのか

「1辺のみ」の場合

以下のCSSプロパティを使う。

CSSプロパティ対象
border-top上辺の線
border-right右辺の線
border-bottom下辺の線
border-left左辺の線

「2辺以上」の場合

下表の優先順位で設定する。具体的には、ベースとなる境界線を borderプロパティで指定し、個別に変更が必要な項目を他のプロパティで上書きする。

top right bottom left

CSSプロパティ対象
border-top上辺の線
border-right右辺の線
border-bottom下辺の線
border-left左辺の線

上下左右の「1辺のみ」に線を付けたい場合に使う。一般的に2辺以上に線を引くときに、これらのプロパティを使うと保守性が悪くなる。

使用例。

CSS : 1辺を引く
.top    {    border-top:    solid   4px  blue;   }
.right  {    border-right:  solid   4px  blue;   }
.bottom {    border-bottom: solid   4px  blue;   }
.left   {    border-left:   solid   4px  blue;   }
HTML : 適用するHTML
<div class="top">       top     </div>
<div class="right">     right   </div>
<div class="bottom">    bottom  </div>
<div class="left">      left    </div>
実行結果
top
right
bottom
left

試しに、これで3辺に境界線を引いてみる。

CSS : 3辺を引く
.sample   {
    border-top:     solid   5px   red;
    border-right:   dashed  7px   blue;
    border-bottom:  dotted  6px   purple;
}
HTML : 適用するHTML
<div class="sample">
    sample
</div>
実行結果
sample

普通は、このような奇抜な線を引かない。

同じ線だったり、

CSS : 同じ線
.sample   {
    border-top:     solid   5px   blue;
    border-right:   solid   5px   blue;
    border-bottom:  solid   5px   blue;
}
実行結果
sample

線の種類だけ変えたり、

CSS : 線の種類だけを変える
.sample   {
    border-top:     solid   5px   blue;
    border-right:   dashed  5px   blue;
    border-bottom:  dotted  5px   blue;
}
実行結果
sample

線の太さだけ変えたり、

CSS : 線の太さだけを変える
.sample   {
    border-top:     solid  5px   blue;
    border-right:   solid  7px   blue;
    border-bottom:  solid  9px   blue;
}
実行結果
sample

線の色だけ変える。

CSS : 線の色だけを変える
.sample   {
    border-top:     solid  5px   blue;
    border-right:   solid  5px   purple;
    border-bottom:  solid  5px   green;
}
実行結果
sample

色を変えるにしても、すべての辺を変えることは少ない。

CSS : 2色
.sample   {
    border-top:     solid  5px   blue;
    border-right:   solid  5px   purple;
    border-bottom:  solid  5px   blue;
}
実行結果
sample

いずれにしても、調和を取るために、少しの変更にするのが普通。

さて、上の例でベースの色をblueからindigoに変更したとする。

CSS : blueからindigoに
.sample   {
    border-top:     solid  5px   indigo;
    border-right:   solid  5px   purple;
    border-bottom:  solid  5px   indigo;
}
実行結果
sample

上記のように、2カ所の色を変更する必要がある。

ところで、上と同じ境界線を下のCSSコードで書くことも可能。(解説は後述)

CSS : 別の書き方
.sample   {
    border:    solid  5px   indigo;
    border-right-color:     purple;
    border-left-style:      none;
}
実行結果
sample

この場合、indigoの色を指定しているのが「一カ所だけ」なので保守性が高まる。blueにしてみる。

CSS : blueにしてみる
.sample   {
    border:    solid  5px   blue;
    border-right-color:     purple;
    border-left-style:      none;
}
実行結果
sample

ということで、2辺以上を引く場合、borderプロパティを使った方が保守性が高い。

style width color

CSSプロパティ対象
border-style線の種類
border-width線の太さ
border-color線の色

borderプロパティの復習。

CSS : borderプロパティ
.sample {
    border:  solid  4px  red;
}
HTML : 適用するHTML
<div class="sample">
    sample
</div>
実行結果
sample

これをborder-styleborder-widthborder-colorプロパティを使って書き直す。

CSS : borderプロパティを使わない
.sample {
    border-style:   solid;
    border-width:   4px;
    border-color:   red;
}
HTML : 適用するHTML
<div class="sample">
    sample
</div>
実行結果
sample

borderプロパティを使った方がシンプルで保守性が高い。

では、何のためにborder-styleborder-widthborder-colorプロパティを使うのか?

これらのCSSプロパティはborderプロパティの補助で、以下の2つの目的のために使う。

目的1 少しだけ違う設定を作りたい場合

以下は、.baseクラスを基本として、少し違う設定を作った例。

CSS : 少しだけ違う設定をしたい
.base   {  border:   solid  6px  red; }
.dotted {  border-style: dotted;      }
.thin   {  border-width: thin;        }
.green  {  border-color: green;       }
HTML : 適用するHTML
<div class="base">        base             </div>
<div class="base dotted"> base <br> dotted </div>
<div class="base thin">   base <br> thin   </div>
<div class="base green">  base <br> green  </div>
実行結果
base
base
dotted
base
thin
base
green

.baseクラスのborderridge 10px blueに変更してみる。

CSS : 「ridge 10px blue」に変更
.base  {  border:  ridge  10px  blue;  }
.dotted {  border-style: dotted;      }
.thin   {  border-width: thin;        }
.green  {  border-color: green;       }
実行結果
base
base
dotted
base
thin
base
green

全ての境界線が連動して変更されている。

これをborderプロパティだけで書いてみる。

CSS : borderプロパティだけで書く
.base {    border: ridge   10px  blue;  }
.dotted {  border: dotted  10px  blue;  }
.thin {    border: ridge   thin  blue;  }
.green {   border: ridge   10px  green; }
HTML : 適用するHTML
<div class="base">   base   </div>
<div class="dotted"> dotted </div>
<div class="thin">   thin   </div>
<div class="green">  green  </div>
実行結果
base
dotted
thin
green

.baseクラスをsolid 6px redに戻してみる。

CSS : baseクラスを変更
.base {    border: solid   6px   red;   }
.dotted {  border: dotted  10px  blue;  }
.thin {    border: ridge   thin  blue;  }
.green {   border: ridge   10px  green; }
実行結果
base
dotted
thin
green

他のクラスも「ridgesolid」「10px4px」「bluered」と変更しないと、調和しない。

CSS : 他のクラスも変更する
.base   {  border: solid   6px  red;   }
.dotted {  border: dotted  6px  red;   }
.thin   {  border: solid   thin red;   }
.green  {  border: solid   6px  green; }
実行結果
base
dotted
thin
green

border-styleborder-widthborder-colorプロパティを使うと保守性が高まったことが分かる。

目的2 上下左右で異なる設定にする場合

引き数の数(最大4)により、上下左右を個別に指定ができる。

引き数の数第一引き数第二引き数第三引き数第四引き数
1上下左右---
2上下左右--
3左右-
4
CSS : 「上下」「左右」で異なる線の種類にする
.sample {
    border:         6px  red;
    border-style:   dotted double;
}
HTML : 適用するHTML
<div class="sample">
    sample
</div>
実行結果
sample
CSS : 「上」「左右」「下」で異なる線の太さにする
.sample {
    border:         solid  red;
    border-width:   1px 10px 5px;
}
実行結果
sample
CSS : 「上」「右」「下」「左」で異なる線の色にする
.sample {
    border:         solid  8px;
    border-color:   red blue green orange;
}
実行結果
sample

これをborder-topborder-rightborder-bottomborder-leftプロパティを使って書くこともできる。

CSS : 「上」「右」「下」「左」で異なる線の色にする
.sample {
    border-top:    solid  8px  red;
    border-right:  solid  8px  blue;
    border-bottom: solid  8px  green;
    border-left:   solid  8px  orange;
}
実行結果
sample

ただし、「solid 8px」の記述が冗長であるので保守性が悪い。

より細かい指定

CSSプロパティ対象
border-top-style上辺の種類
border-top-width上辺の太さ
border-top-color上辺の色
border-right-style右辺の種類
border-right-width右辺の太さ
border-right-color右辺の色
border-bottom-style下辺の種類
border-bottom-width下辺の太さ
border-bottom-color下辺の色
border-left-style左辺の種類
border-left-width左辺の太さ
border-left-color左辺の色

「特定の辺(上/下/左/右)」の「特定の項目(種類/太さ/色)」を変更するために使う。

通常、borderプロパティでベースの線を決めて、部分的な変更を行うために使う。

例。

CSS : いろんな例
.base         {   border:   solid  6px  blue;     }
.top-style    {   border-top-style:     dotted;   }
.right-width  {   border-right-width:   2px;      }
.bottom-color {   border-bottom-color:  red;      }
HTML : 適用するHTML
<div class="base">              base                    </div>
<div class="base top-style">    base <br> top-style     </div>
<div class="base right-width">  base <br> right-width   </div>
<div class="base bottom-color"> base <br> bottom-color  </div>
実行結果
base
base
top-style
base
right-width
base
bottom-color

こういうふうにも使える。

CSS : こういうふうにも使える
.final-sample {
    border:    ridge  20px  #0bf;
    border-top-width:       7px;
    border-bottom-width:    14px;
    border-bottom-color:    #08c;
    border-right-color:     #0af;
}
HTML : 適用するHTML
<div class="final-sample">
    上辺と下辺を細くして<br>
    右辺と下辺を少し濃い色にする
</div>
実行結果
上辺と下辺を細くして
右辺と下辺を少し濃い色にする

こう書いた方が、さらにシンプルになるけど。

CSS : よりシンプルに。
.final-sample {
    border:                 ridge       #0bf    ;
    border-width:           7px   20px  14px    ;
    border-bottom-color:    #08c                ;
    border-right-color:     #0af                ;
}
実行結果
上辺と下辺を細くして
右辺と下辺を少し濃い色にする

線を消す

線を消したい場合、stylenoneを設定すればよい。

CSS : 線を消す
.red {
    border:  solid  6px  red;
    border-right-style: none;
}
.blue {
    border:         6px     blue;
    border-style:   solid   none;
}
.green {
    border:       6px  green            ;
    border-style: none none solid solid ;
}
HTML : 適用するHTML
<div class="red">   red  </div>
<div class="blue">  blue </div>
<div class="green"> green </div>
実行結果
red
blue
green

Emmet

border-right-styleは展開不能である。( bdrsborder-radius: ;に展開される )

記述Visual Studio Code
bdtborder-top: 1px solid #000;
bdrborder-right: 1px solid #000;
bdbborder-bottom: 1px solid #000;
bdlborder-left: 1px solid #000;
bdsborder-style: none;
bdshborder-style: hidden;
bdsdborder-style: double;
bdsdsborder-style: dashed;
bdsdtborder-style: dotted;
bdsgborder-style: groove;
bdsiborder-style: inset;
bdsoborder-style: outset;
bdsrborder-style: ridge;
bdssborder-style: solid;
bdwborder-width: ;
bdw5border-width: 5px;
bdcborder-color: #000;
bdtsborder-top-style: ;
bdtwborder-top-width: ;
bdtcborder-top-color: #000;
bdrwborder-right-width: ;
bdrcborder-right-color: #000;
bdbsborder-bottom-style: ;
bdbwborder-bottom-width: ;
bdbcborder-bottom-color: #000;
bdlsborder-left-style: ;
bdlwborder-left-width: ;
bdlcborder-left-color: #000;