概要へ移動

簡単な例。

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;