border : 境界線 - CSSプロパティ - Web開発

簡単な例。

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プロパティには「以下の３つの項目」を設定する必要がある。

（表） `border`プロパティの設定項目
項目	意味	設定値の例
`style`	線の種類	`solid`、`dashed` など
`width`	線の太さ	`5px`、`thick` など
`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プロパティで（上下左右の）一部の線を消すために使う。
none と hidden の違いは、ここで説明している。それ以外では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` : 色

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

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

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プロパティ

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

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

両方

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

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

class	`style`	`width`	`color`	解説
`.empty`	（無指定）	（無指定）	（無指定）	`style`が`none`となり、線は表示されてない。
`.solid`	`solid`	（無指定）	（無指定）	`width`が`medium`、`color`が`black`となっている。
`.solid-7px`	`solid`	`7px`	（無指定）	`color`が`black`となっている。
`.solid-red`	`solid`	（無指定）	`red`	`width`が`medium`となっている。
`.solid-7px-red`	`solid`	`7px`	`red`	３項目を全て指定しているので、デフォルト値は無い。

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

項目	デフォルト値
`style`	`none`
`width`	`medium`
`color`	`black`

Emmet : `bd`

記述	Visual Studio Code
`bd`	`border: 1px solid #000;`

リンク

border-top | border-right | border-bottom | border-left | border-style | border-width | border-color : 境界線

borderの概要

項目の並び順は自由

style : 種類

width : 太さ

color : 色

併用するCSSプロパティ

marginプロパティ

paddingプロパティ

両方

デフォルト値の確認

Emmet : bd

リンク

`border`の概要

`style` : 種類

`width` : 太さ

`color` : 色

`margin`プロパティ

`padding`プロパティ

Emmet : `bd`