簡単な例。

CSS : 「border」の例
.red {
    border: 6px solid red;
}
.green {
    border: 10px outset green;
}
.blue {
    border: dashed blue;
}
HTML : 適用するHTML
<div class="red">red</div>
<div class="green">green</div>
<div class="blue">blue</div>
実行結果
red
green
blue

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

線の「種類(style」を変える
solid
dotted
dashed
double
inset
outset
groove
ridge
none
線の「太さ(width」を変える
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
線の「色(color」を変える
orangered
#ff8400
#fc0

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

CSS : デフォルトCSS
div {
    margin:     7px;            /*  外側の余白  */
    padding:    10px;           /*  内側の余白  */
    display:    inline-block;   /*  横並び  */
}

borderの概要

ボックスの「境界線(ボーダー)」を指定する。

borderプロパティには「以下の3つの項目」を設定する必要がある。

(表) borderプロパティの設定項目
項目意味設定値の例
style線の種類soliddashed など
width線の太さ5pxthick など
color線のblue#ff8400 など

項目の並び順は自由

設定項目の並び順を変更しても結果は同じ。以下、実験してみる。

CSS : 設定項目の「並び順」を変えてみる実験
.order1  {  border:  solid  5px    green    ;  }
.order2  {  border:  solid  green  5px     ;  }
.order3  {  border:  5px    green  solid   ;  }
.order4  {  border:  5px    solid  green    ;  }
.order5  {  border:  green  solid  5px     ;  }
.order6  {  border:  green  5px    solid   ;  }
HTML : 適用するHTML
<div class="order1">order1</div>
<div class="order2">order2</div>
<div class="order3">order3</div>
<div class="order4">order4</div>
<div class="order5">order5</div>
<div class="order6">order6</div>
全て同じ表示結果になるので、並び順は自由であることが分かる
order1
order2
order3
order4
order5
order6

style : 種類

下表の値で設定する。

(表) style の設定値
設定値種類デフォルト
solid
実線
dotted
点線
dashed
破線
double
二重線
inset
へこんだ
outset
盛り上がった
groove
へこんだ線
ridge
盛り上がった線
hidden
非表示
none
非表示

例。

CSS : borderの「種類」を変えてみる
.solid   {  border:  11px   orangered   solid   ;    }
.dotted  {  border:  11px   orangered   dotted  ;    }
.dashed  {  border:  11px   orangered   dashed  ;    }
.double  {  border:  11px   orangered   double  ;    }
.inset   {  border:  11px   orangered   inset   ;    }
.outset  {  border:  11px   orangered   outset  ;    }
.groove  {  border:  11px   orangered   groove  ;    }
.ridge   {  border:  11px   orangered   ridge   ;    }
.hidden  {  border:  11px   orangered   hidden  ;    }
.none    {  border:  11px   orangered   none    ;    }
HTML : 適用するHTML
<div class="solid"  >solid</div>
<div class="dotted" >dotted</div>
<div class="dashed" >dashed</div>
<div class="double" >double</div>
<div class="inset"  >inset</div>
<div class="outset" >outset</div>
<div class="groove" >groove</div>
<div class="ridge"  >ridge</div>
<div class="hidden" >hidden</div>
<div class="none"   >none</div>
実行結果
solid
dotted
dashed
double
inset
outset
groove
ridge
none
  • style のデフォルト値がnoneであるので、何か(solidなど)を指定しないと線が表示されないので注意。(つまり、実質的に設定は必須である)
  • 境界線が非表示になる設定値(= none or hidden)は、(普通は)borderプロパティでは使わない。しかし、border-styleプロパティで(上下左右の)一部の線を消すために使う。
  • nonehidden の違いは、ここで説明している。それ以外ではnoneと同じなので、hiddenを使うことはほぼ無い。

width : 太さ

数値(+ 単位)で指定する。

CSS : borderの「太さ」を変えてみる
.px1     {  border:  orangered solid    1px    ;     }
.px2     {  border:  orangered solid    2px    ;     }
.px3     {  border:  orangered solid    3px    ;     }
.px4     {  border:  orangered solid    4px    ;     }
.px5     {  border:  orangered solid    5px    ;     }
.px6     {  border:  orangered solid    6px    ;     }
.px7     {  border:  orangered solid    7px    ;     }
.px8     {  border:  orangered solid    8px    ;     }
.px9     {  border:  orangered solid    9px    ;     }
.px10    {  border:  orangered solid    10px   ;     }
HTML : 適用するHTML
<div class="px1"    >1px</div>
<div class="px2"    >2px</div>
<div class="px3"    >3px</div>
<div class="px4"    >4px</div>
<div class="px5"    >5px</div>
<div class="px6"    >6px</div>
<div class="px7"    >7px</div>
<div class="px8"    >8px</div>
<div class="px9"    >9px</div>
<div class="px10"   >10px</div>
実行結果
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

下表の設定値を使うこともできる。

設定値太さ一般的なブラウザでの太さデフォルト
thin
細い
1px
medium
普通
3px
thick
太い
5px

例。

CSS : 太さの設定値
.thin    {  border:  orangered solid    thin    ;    }
.medium  {  border:  orangered solid    medium  ;    }
.thick   {  border:  orangered solid    thick   ;    }
HTML : 適用するHTML
<div class="thin"   >thin</div>
<div class="medium" >medium</div>
<div class="thick"  >thick</div>
実行結果
thin
medium
thick

color : 色

カラーコードで指定する。

デフォルト値は黒(#000black)である。

CSS : borderの「色」を変えてみる
.orangered      { border: 8px  solid  orangered ; }
.ff8400         { border: 8px  solid  #ff8400   ; }
.fc0            { border: 8px  solid  #fc0      ; }
HTML : 適用するHTML
<div class="orangered"  >orangered</div>
<div class="ff8400"     >#ff8400</div>
<div class="fc0"        >#fc0</div>
実行結果
orangered
#ff8400
#fc0

併用するCSSプロパティ

marginpaddingを指定しない場合、以下のように「余白」が無くなる。

CSS : borderの「色」を変えてみる
.orangered      { border: 8px  solid  orangered ; }
.ff8400         { border: 8px  solid  #ff8400   ; }
.fc0            { border: 8px  solid  #fc0      ; }
HTML : 適用するHTML
<div class="orangered"  >orangered</div>
<div class="ff8400"     >#ff8400</div>
<div class="fc0"        >#fc0</div>
実行結果
orangered
#ff8400
#fc0

marginプロパティ

marginを加えると「線の外側」に余白ができる。

CSS : marginを追加
.orangered  {
    border:     8px  solid  orangered;
    margin:     15px;
}
.ff8400     {
    border:     8px  solid  #ff8400;
    margin:     15px;
}
.fc0        {
    border:     8px  solid  #fc0;
    margin:     15px;
}
実行結果
orangered
#ff8400
#fc0

paddingプロパティ

paddingを加えると「線の内側」に余白ができる。

CSS : paddingを追加
.orangered  {
    border:     8px  solid  orangered;
    padding:    15px;
}
.ff8400     {
    border:     8px  solid  #ff8400;
    padding:    15px;
}
.fc0        {
    border:     8px  solid  #fc0;
    padding:    15px;
}
実行結果
orangered
#ff8400
#fc0

両方

marginpaddingの両方を指定した場合、「外側」と「内側」の両方に余白ができる。

CSS : 両方追加
.orangered  {
    border:     8px  solid  orangered;
    margin:     15px;
    padding:    15px;
}
.ff8400     {
    border:     8px  solid  #ff8400;
    margin:     15px;
    padding:    15px;
}
.fc0        {
    border:     8px  solid  #fc0;
    margin:     15px;
    padding:    15px;
}
実行結果
orangered
#ff8400
#fc0

※ 横に並べるならdisplay: inline-block;も加えておけばよい。

デフォルト値の確認

CSS : デフォルト値を確認してみる
.empty          { border:                   ; }
.solid          { border:  solid            ; }
.solid-7px      { border:  solid  7px       ; }
.solid-red      { border:  solid       red  ; }
.solid-7px-red  { border:  solid  7px  red  ; }
HTML : 適用するHTML
<div class="empty"           >empty</div>
<div class="solid"           >solid</div>
<div class="solid-7px"       >solid-7px</div>
<div class="solid-red"       >solid-red</div>
<div class="solid-7px-red"   >solid-7px-red</div>
実行結果
empty
solid
solid-7px
solid-red
solid-7px-red
classstylewidthcolor解説
.empty(無指定)(無指定)(無指定)stylenoneとなり、線は表示されてない。
.solidsolid(無指定)(無指定)widthmediumcolorblackとなっている。
.solid-7pxsolid7px(無指定)colorblackとなっている。
.solid-redsolid(無指定)redwidthmediumとなっている。
.solid-7px-redsolid7pxred3項目を全て指定しているので、デフォルト値は無い。

つまり、デフォルト値は下表。

項目デフォルト値
stylenone
widthmedium
colorblack

Emmet : bd

記述Visual Studio Code
bdborder: 1px solid #000;