【CSS】要素の境界線を指定するborder属性

borderは要素の境界を設定する属性です。
border属性には境界線の色、種類の3つの値を指定できます。

これはborder属性が次の3つの属性を一括に指定できる属性であるためです。

  • border-width属性
  • border-style属性
  • border-color属性
これらの属性を別々に指定しても構いませんが、border属性に指定したほうが短くすっきり記述できるため、border属性の一括指定が好まれて使用されます。

.box {
    width: 100px;
    height: 100px;
}

.border {
    border: solid 4px orange;
}
    

<div class="box border"></div>
    

この例では、border属性で指定していますが、それぞれの属性を使用すると次のようになります。


.box {
    width: 100px;
    height: 100px;
}

.border {
    border-style: solid;
    border-width: 4px;
    border-color: orange;
}
    

理解度チェック

  • border属性はどの属性の一括指定を行うものですか?3つお答えください。

border-width属性について

border-widthは境界線の幅を指定する属性です。

この属性に有効な値を指定しても、後述するborder-style属性がnonehiddenであれば0として計算されます。

設定できる値は【CSS】文字の装飾!文字サイズを指定する方法(px、em、rem)で説明したものと同じです。

空白区切りで複数の値を指定することにより、上辺、右辺、下辺、左辺それぞれに値を指定することができますが、border属性で一括指定する場合は4辺をまとめて指定する1つの値しか指定できません。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 直線を表示します */
    border-style: solid;
    /* 4辺の幅をまとめて指定します */
    border-width: 4px;
}
    

<div class="box border">要素</div>
    
要素

複数の値を指定する

border-width属性には値を4つまで指定することができます。

  • 値が1つ・・・4辺のすべてに値を適用
  • 値が2つ・・・上下辺、左右辺にそれぞれ適用
  • 値が3つ・・・上辺、左右辺、下辺にそれぞれ適用
  • 値が4つ・・・上辺、右辺、下辺、左辺にそれぞれ適用
複数指定するには、それぞれの値を空白区切りで記述します

値を4つ指定する例


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 直線を表示します */
    border-style: solid;
    /* 4辺の幅をそれぞれ指定します */
    border-width: 4px 1rem 0.6em 8px;
}
    

<div class="box border">要素</div>
    
要素

理解度チェック

  • border-width属性は何に作用する属性ですか?
  • border-width属性に指定できる値はどのようなものですか?
  • border-width属性に2つの値を指定した場合はどの辺に適用されますか?

border-style属性について

境界線には、一直線、点線、二重線など複数のスタイルがあります。

どのスタイルで境界線を引くのかを指定するにはborder-style属性を使用します。

none

noneを指定すると境界線は表示されません
境界線の幅を指定するborder-width属性の値は0として計算されるようになります。

table要素で使用する場合、テーブルのセルの境界線を重ねて表示させるborder-collapse: collapse;が指定されていると、他のセルの境界線が表示されることがあります


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 表示されません */
    border-style: none;
}
    

<div class="box border">要素</div>
    
要素

hidden

hiddenを指定するとnoneと同様に境界線は表示されません
また、境界線の幅を指定するborder-width属性の値も0として計算されるようになります。

noneと異なるのは、table要素で使用する場合、テーブルのセルの境界線を重ねて表示させるborder-collapse: collapse;が指定されていても他のセルの境界線が表示されることがないという点です。。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 表示されません */
    border-style: hidden;
}
    

<div class="box border">要素</div>
    
要素

dotted

dottedを指定すると境界線は点線になります。

border-width属性に指定した値が点の直径となります。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 点線になります */
    border-style: dotted;
    /* 点の直径です */
    border-width: 8px;
}
    

<div class="box border">要素</div>
    
要素

dashed

dashedを指定すると境界線は途切れた短い線になります。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* ダッシュ線になります */
    border-style: dashed;
}
    

<div class="box border">要素</div>
    
要素

solid

solidを指定すると境界線は直線になります。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 直線になります */
    border-style: solid;
}
    

<div class="box border">要素</div>
    
要素

double

doubleを指定すると境界線は二重線になります。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 二重線になります */
    border-style: double;
}
    

<div class="box border">要素</div>
    
要素

複数の値を指定する

border-style属性にはスタイルを4つまで指定することができます。

  • 値が1つ・・・4辺のスタイルに適用
  • 値が2つ・・・上下辺、左右辺にそれぞれ適用
  • 値が3つ・・・上辺、左右辺、下辺にそれぞれ適用
  • 値が4つ・・・上辺、右辺、下辺、左辺にそれぞれ適用
複数指定するには、それぞれの値を空白区切りで記述します。

値を2つ指定する例


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 値を2つ指定します */
    border-style: double solid;
}
    

<div class="box border">要素</div>
    
要素

理解度チェック

  • border-style属性は何に作用する属性ですか?
  • border-style属性にsolidを指定するとどの様な線になりますか?

border-color属性について

境界線の色を指定するにはborder-color属性を使用します。

指定できる値は【CSS】文字の装飾!文字色の指定の仕方と最低限意識する点で説明したものと同じです。

また、border-style属性がnonehiddenに設定されていたり、border-width属性が0に設定されている場合は表示されません。

これまでのborder-width属性、border-style属性と同様に複数の辺にそれぞれ指定することができます。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 直線を表示します */
    border-style: solid;
    /* 境界線の幅を指定します */
    border-width: 4px;
    /* 境界線の色を指定します */
    border-color: orange;
}
    

<div class="box border">要素</div>
    
要素

複数の値を指定する

これまでと同様に、border-color属性にも値を4つまで指定することができます。

  • 値が1つ・・・4辺の境界線の色に適用
  • 値が2つ・・・上下辺、左右辺にそれぞれ適用
  • 値が3つ・・・上辺、左右辺、下辺にそれぞれ適用
  • 値が4つ・・・上辺、右辺、下辺、左辺にそれぞれ適用
複数指定するには、それぞれの値を空白区切りで記述します。

値を3つ指定する例


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 直線を表示します */
    border-style: solid;
    /* 境界線の幅を指定します */
    border-width: 4px;
    /* 境界線の色をそれぞれ指定します */
    border-color: orange green red;
}
    

<div class="box border">要素</div>
    
要素

理解度チェック

  • border-color属性は何に作用する属性ですか?
  • border-color属性に指定できる値はどのようなものですか?

border属性で一括指定する

border-width属性、border-style属性、border-color属性をborder属性を使用して一括指定します。

冒頭でも述べたように、一括指定のほうが記述が少なく、読みやすくなるため好まれて使用されることが多いです。

ただし、border属性にはすべての辺に適用する値しか指定できないため、辺ごとに値を指定する場合は、それぞれの属性を用いる必要があります。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 一括指定します */
    border: solid 4px orange;
}
    

<div class="box border">要素</div>
    
要素

これは次の指定と同等です。


.border {
    border-width:  4px;
    border-style: solid;
    border-color: orange;
}
    

一括指定する際の、値の順序は関係ありません。

次の順序でも問題なく指定できます。
ただし、他の指定箇所と順序を統一することで可読性が向上します。


.border {
    border: orange solid 4px;
}
    

ある辺のみの値を指定する場合

border-width属性、border-style属性、border-color属性は、それぞれが各辺の一括指定を行う属性となっており、更に4辺それぞれに指定できる属性が存在します。

例えば、左辺だけの境界線の色や幅、スタイルを変えたい場合は次の様に記述できます。


.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.border {
    /* 一括指定します */
    border: solid 4px orange;
    /* 左辺だけのスタイルを指定します */
    border-left-color: green;
    border-left-width: 1rem;
    border-left-style: dashed;
}
    

<div class="box border">要素</div>
    
要素

左辺のみに指定するため、それぞれの属性名の中間にleftを使用した属性を使用しています。

同じ様にtop(上辺)、right(右辺)、bottom(下辺)に置き換えて使用することができます。

理解度チェック

  • 一括指定であるborder属性が好まれて使用される理由には何がありますか?

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。