CSS | border | 境界線

border(ボーダー)はボックスの境界線を指定するためのCSSプロパティです。border-top、border-bottom、border-left、border-right、border-style、border-color、border-widthについても解説します。

境界線	全て	種類	色	太さ
全辺	`border`	`border-style`	`border-color`	`border-width`
上辺	`border-top`	`border-top-style`	`border-top-color`	`border-top-width`
下辺	`border-bottom`	`border-bottom-style`	`border-bottom-color`	`border-bottom-width`
左辺	`border-left`	`border-left-style`	`border-left-color`	`border-left-width`
右辺	`border-right`	`border-right-style`	`border-right-color`	`border-right-width`

`border`

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

実行結果初期状態

sample

borderプロパティにsolidを指定します。 .sampleクラスの周りにsolid(実線)が表示されます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: solid;
}

実行結果solid

sample

線の種類をdouble(二重線)に変更してみます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: double;
}

実行結果double

sample

線の色を変えてみます。 borderプロパティにdouble redと指定します。赤い二重線になります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: double red;
}

実行結果double red

sample

線の太さを変えてみます。 borderプロパティにdouble red 12pxと指定します。太くて赤い二重線になります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: double red 12px;
}

実行結果double red 12px

sample

このようにborderプロパティには種類/色/太さの3つの設定値が必要です。

`border`プロパティの設定項目
項目	設定値	デフォルト値
種類	`solid`, `dotted`, `dashed`, `double`, `inset`, `outset`, `groove`, `ridge`, `none`	`none`
色	カラーコード	(文字の色)
太さ	`thin`, `medium`, `thick`, `〇px`	`medium`

borderの設定値の「順番」

設定値の順番は不定であり、どのような順番でも結果は同じになります。

HTML


<div class="blue-double-thick">blue<br>double<br>thick</div>
<div class="blue-thick-double">blue<br>thick<br>double</div>
<div class="double-blue-thick">double<br>blue<br>thick</div>
<div class="double-thick-blue">double<br>thick<br>blue</div>
<div class="thick-double-blue">thick<br>double<br>blue</div>
<div class="thick-blue-double">thick<br>blue<br>double</div>

CSS


div {
    background-color: white;        /* 背景 */
    display:          inline-block; /* インライン・ブロック要素 */
    margin:           8px;          /* 外側の余白 */
    padding:          6px;          /* 内側の余白 */
}

CSS


.blue-double-thick { border: blue double thick; }
.blue-thick-double { border: blue thick double; }
.double-blue-thick { border: double blue thick; }
.double-thick-blue { border: double thick blue; }
.thick-double-blue { border: thick double blue; }
.thick-blue-double { border: thick blue double; }

実行結果順番を変えても結果は同じ

blue
double
thick

blue
thick
double

double
blue
thick

double
thick
blue

thick
double
blue

thick
blue
double

`border`の「種類」

下表の値を指定できます。

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

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>
<br>
<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>

CSS


div {
    background-color: white;        /* 背景 */
    display:          inline-block; /* インライン・ブロック要素 */
    margin:           8px;          /* 外側の余白 */
    padding:          6px;          /* 内側の余白 */
}

CSS


.solid  { border: 8px #c68 solid  ; }
.dotted { border: 8px #c68 dotted ; }
.dashed { border: 8px #c68 dashed ; }
.double { border: 8px #c68 double ; }
.inset  { border: 8px #c68 inset  ; }
.outset { border: 8px #c68 outset ; }
.groove { border: 8px #c68 groove ; }
.ridge  { border: 8px #c68 ridge  ; }
.hidden { border: 8px #c68 hidden ; }
.none   { border: 8px #c68 none   ; }

実行結果borderの種類

solid

dotted

dashed

double

inset

outset

groove

ridge

none

borderの「種類」が未指定の場合

デフォルトはnoneなので線は表示されません。borderの種類は必ず設定しましょう。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 10px red;
}

実行結果線は表示されない

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 10px red double;
}

実行結果線は表示される

sample

`border`の「色」

borderの色はカラーコードで指定します。

borderのデフォルトの色は、その要素の文字の色(＝color)になります。たとえば、colorがpurpleの場合、(borderの色を指定しないと)線の色もpurpleになります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    color: purple; /* 文字の色 */
}

実行結果文字が紫

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    color: purple; /* 文字の色 */
    border: solid;
}

実行結果線も紫になる

sample

borderプロパティにdarkgreenを指定してみます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    color: purple; /* 文字の色 */
    border: solid darkgreen;
}

実行結果線の色が変わる

sample

もちろん#で始まるカラーコードも指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    color: purple; /* 文字の色 */
    border: solid #800040;
}

実行結果#+6桁のカラーコード

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    color: purple; /* 文字の色 */
    border: solid #037;
}

実行結果#+3桁のカラーコード

sample

`border`の「太さ」

borderの太さは通常px単位で指定します。1pxから15pxまで変更してみます。

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>
<br>
<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>
<br>
<div class="px11">11px</div>
<div class="px12">12px</div>
<div class="px13">13px</div>
<div class="px14">14px</div>
<div class="px15">15px</div>

CSS


div {
    background-color: white;        /* 背景 */
    display:          inline-block; /* インライン・ブロック要素 */
    margin:           8px;          /* 外側の余白 */
    padding:          6px;          /* 内側の余白 */
}

CSS


.px1  { border: solid #57d 1px ; }
.px2  { border: solid #57d 2px ; }
.px3  { border: solid #57d 3px ; }
.px4  { border: solid #57d 4px ; }
.px5  { border: solid #57d 5px ; }
.px6  { border: solid #57d 6px ; }
.px7  { border: solid #57d 7px ; }
.px8  { border: solid #57d 8px ; }
.px9  { border: solid #57d 9px ; }
.px10 { border: solid #57d 10px; }
.px11 { border: solid #57d 11px; }
.px12 { border: solid #57d 12px; }
.px13 { border: solid #57d 13px; }
.px14 { border: solid #57d 14px; }
.px15 { border: solid #57d 15px; }

実行結果1px～15pxの太さ

1px

2px

3px

4px

5px

6px

7px

8px

9px

10px

11px

12px

13px

14px

15px

下表のキーーワードで指定することもできます。

`border`の太さのキーワード
キーワード	太さ	一般的なブラウザでの太さ
`thin`	細い	1px
`medium`	普通	3px
`thick`	太い	5px

HTML


<div class="thin"   >thin</div>
<div class="medium" >medium</div>
<div class="thick"  >thick</div>

CSS


div {
    background-color: white;        /* 背景 */
    display:          inline-block; /* インライン・ブロック要素 */
    margin:           8px;          /* 外側の余白 */
    padding:          6px;          /* 内側の余白 */
}

CSS


.thin   { border: solid #57d thin ; }
.medium { border: solid #57d medium ; }
.thick  { border: solid #57d thick ; }

実行結果borderの太さ

thin

medium

thick

borderの「太さ」が未指定の場合

デフォルト値のmediumになります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: solid #57d;
}

実行結果太さが未指定

sample

`border-top`

border-topで上辺のborderを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border-top:   8px solid red;
}

実行結果上辺

sample

`border-bottom`

border-bottomで下辺のborderを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border-bottom: 8px solid red;
}

実行結果下辺

sample

`border-left`

border-leftで左辺のborderを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border-left: 8px solid red;
}

実行結果左辺

sample

`border-right`

border-rightで右辺のborderを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border-right: 8px solid red;
}

実行結果右辺

sample

`border-style`

border-styleは線の種類を変更する場合に使います。

まず、borderプロパティで基本となる線を設定します。 border-styleにdashedを追加すると、borderの種類が上書きされました。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:       7px solid #c68;
}

実行結果border

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:       7px solid #c68;
    border-style: dashed;
}

実行結果border-style

sample

border-styleに設定可能な値は以下です。

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>
<br>
<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>

CSS


div {
    background-color: white;        /* 背景 */
    display:          inline-block; /* インライン・ブロック要素 */
    margin:           8px;          /* 外側の余白 */
    padding:          6px;          /* 内側の余白 */
}

CSS


div { border: 8px #c68; }

.solid  { border-style: solid  ; }
.dotted { border-style: dotted ; }
.dashed { border-style: dashed ; }
.double { border-style: double ; }
.inset  { border-style: inset  ; }
.outset { border-style: outset ; }
.groove { border-style: groove ; }
.ridge  { border-style: ridge  ; }
.hidden { border-style: hidden ; }
.none   { border-style: none   ; }

実行結果border-styleの種類

solid

dotted

dashed

double

inset

outset

groove

ridge

none

border-style 複数の設定値

上下左右で異なるborderの種類を設定するために複数の値を指定できます。

`border-style`プロパティ
設定値の数	1番目	2番目	3番目	4番目
1	上下左右	-	-	-
2	上下	左右	-	-
3	上	左右	下	-
4	上	右	下	左

複数の設定値の例。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
}

実行結果border-style なし

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-style:   dashed;
}

実行結果1つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-style: dashed double;
}

実行結果2つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-style: dashed double dotted;
}

実行結果3つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-style: dashed double dotted ridge;
}

実行結果4つ

sample

`border-color`

border-colorはborderの色を変更する場合に使います。

まず、borderプロパティで基本となる線を設定します。 border-colorにgreenを追加すると、borderの色が上書きされました。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:       7px solid red;
}

実行結果border

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:       7px solid red;
    border-color: green;
}

実行結果border-color

sample

border-color 複数の設定値

上下左右で異なるborderの色を設定するために複数の値を指定できます。

`border-color`プロパティ
設定値の数	1番目	2番目	3番目	4番目
1	上下左右	-	-	-
2	上下	左右	-	-
3	上	左右	下	-
4	上	右	下	左

複数の設定値の例。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid blue;
}

実行結果border-color なし

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid blue;
    border-color: red;
}

実行結果1つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid blue;
    border-color: red gold;
}

実行結果2つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid blue;
    border-color: red gold green;
}

実行結果3つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid blue;
    border-color: red gold green purple;
}

実行結果4つ

sample

`border-width`

border-widthは線の太さを変更する場合に使います。

まず、borderプロパティで基本となる線を設定します。 border-widthに15pxを追加すると、borderの太さが上書きされました。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 7px solid navy;
}

実行結果border

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 7px solid navy;
    border-width: 12px;
}

実行結果border-width

sample

border-width 複数の設定値

上下左右で異なるborderの太さを設定するために複数の値を指定できます。

`border-width`プロパティ
設定値の数	1番目	2番目	3番目	4番目
1	上下左右	-	-	-
2	上下	左右	-	-
3	上	左右	下	-
4	上	右	下	左

複数の設定値の例。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 1px solid #57d;
}

実行結果border-width なし

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 1px solid #57d;
    border-width: 5px;
}

実行結果1つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 1px solid #57d;
    border-width: 5px 9px;
}

実行結果2つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 1px solid #57d;
    border-width: 5px 9px 13px;
}

実行結果3つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 1px solid #57d;
    border-width: 5px 9px 13px 17px;
}

実行結果4つ

sample

`border-〇-〇`

	種類	色	太さ
上辺	`border-top-style`	`border-top-color`	`border-top-width`
下辺	`border-bottom-style`	`border-bottom-color`	`border-bottom-width`
左辺	`border-left-style`	`border-left-color`	`border-left-width`
右辺	`border-right-style`	`border-right-color`	`border-right-width`

border-top-style

border-top-styleは上辺の種類を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-top-style: dotted;
}

実行結果border-top-style

sample

border-top-color

border-top-colorは上辺の色を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-top-color: red;
}

実行結果border-top-color

sample

border-top-width

border-top-widthは上辺の太さを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: 8px solid #57d;
    border-top-width: 2px;
}

実行結果border-top-width

sample

border-bottom-style

border-bottom-styleは下辺の種類を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:    8px solid #57d;
    border-bottom-style: dotted;
}

実行結果border-bottom-style

sample

border-bottom-color

border-bottom-colorは下辺の色を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:    8px solid #57d;
    border-bottom-color: red;
}

実行結果border-bottom-color

sample

border-bottom-width

border-bottom-widthは下辺の太さを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:    8px solid #57d;
    border-bottom-width: 2px;
}

実行結果border-top-width

sample

border-left-style

border-left-styleは左辺の種類を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:  8px solid #57d;
    border-left-style: dotted;
}

実行結果border-left-style

sample

border-left-color

border-left-colorは左辺の色を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:  8px solid #57d;
    border-left-color: red;
}

実行結果border-left-color

sample

border-left-width

border-left-widthは左辺の太さを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:  8px solid #57d;
    border-left-width: 2px;
}

実行結果border-left-width

sample

border-right-style

border-right-styleは右辺の種類を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:   8px solid #57d;
    border-right-style: dotted;
}

実行結果border-right-style

sample

border-right-color

border-right-colorは右辺の色を指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:   8px solid #57d;
    border-right-color: red;
}

実行結果border-right-color

sample

border-right-width

border-right-widthは右辺の太さを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:   8px solid #57d;
    border-right-width: 2px;
}

実行結果border-right-width

sample

効率的な手順

効率的にborderを設定する手順を解説します。

まず、基本となる線から「1辺のみを変更したい」のか「2辺以上を変更したい」のかを決めます。

1辺のみを変更したい場合

borderプロパティを使って、基本となる線を設定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: solid #f9f 8px;
}

実行結果border

sample

border-top/border-bottom/border-left/border-rightのいずれかで、1辺だけを設定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:      solid #f9f   8px;
    border-left: solid purple 8px;
}

実行結果border-left

sample

または、border-〇-〇で細かく設定して調整します。

この例の場合、上のコードよりも下のコードの方が保守性が高いと言えます。上の場合、すでにborderで設定されているsolidと8pxをborder-leftでも重複して設定しています。仮にborderの設定値をdouble #f9f 10pxと変更した場合、border-leftもdouble purple 10pxと変更する必要が出て来るでしょう。下のコードの場合、borderの設定から変更が必要なborder-left-colorのみを変えているので、borderの設定値が変更されてもborder-left-colorを変更する必要はありません。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:            solid #f9f 8px;
    border-left-color: purple;
}

実行結果border

sample

2辺以上を変更したい場合

borderプロパティを使って、基本となる線を設定します。

注意 - border: #57d 3px;ではborderの種類が指定されていないため、デフォルトのnoneとなり、線が表示されていません。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border: #57d 3px;
}

実行結果border

sample

border-style/border-color/border-widthを複数の引数で設定し、2辺以上を変更します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:       #57d 3px;
    border-style: none none solid solid;
}

実行結果border-style

sample

border-〇-〇で細かく設定して調整します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    border:       #57d 3px;
    border-style: none none solid ridge;
    border-left-width: 10px;
}

実行結果border-left-width

sample

border

borderの「種類」

borderの「色」

borderの「太さ」

border-top

border-bottom

border-left

border-right

border-style

border-color

border-width

border-〇-〇

効率的な手順

1辺のみを変更したい場合

2辺以上を変更したい場合

`border`

`border`の「種類」

`border`の「色」

`border`の「太さ」

`border-top`

`border-bottom`

`border-left`

`border-right`

`border-style`

`border-color`

`border-width`

`border-〇-〇`