HTML Living Standard　　第２部 CSS　６ ボーダー

 

６　ボーダー

ボーダーについて説明します。

属性説明
border-*-style上下左右のボーダーの種類
border-styleボーダーの種類
border-*-color上下左右のボーダーの色
border-colorボーダーの色
border-*-width上下左右のボーダーの太さ
border-widthボーダーの太さ
border-*上下左右のボーダー
borderボーダー

* には、top、bottom、left、right を指定することができます。

６．１　　ボーダー

ボーダーについて説明します。

スタイルシートでは、いろいろな要素を長方形のボックスとして扱います。ボーダーとは、そのボックスの枠に相当します。

６．１．１ 上下左右のボーダーの種類　(border-top-style、border-bottom-style、border-left-style、border-right-style)

上下左右のボーダーの種類を指定します。

border-top-style、border-bottom-style、border-left-style、border-right-style:属性値

上下左右のボーダーの種類を指定する。

属性値説明
none境界線を引かない（規定値）
hidden境界線を表示しない。none とほぼ同等
dotted点線
　　　　　　　　　　 
dashed破線
　　　　　　　　　　 
solid実線
　　　　　　　　　　 
double二重線
　　　　　　　　　　 
groove立体的に窪んだ線

　　　　　　　　　　 
ridge立体的に隆起した線

　　　　　　　　　　 
insetボックス全体が窪んだようにみえる線

　　　　　　　　　　 
outsetボックス全体が隆起したようにみえる線

　　　　　　　　　　 
記述例
<span style="border-top-style:double;">border-top-style</span>　
<span style="border-bottom-style:double;">border-bottom-style</span>　
<span style="border-left-style:double;">border-left-style</span>　
<span style="border-right-style:double;">border-right-style</span>
表示例

６．１．２ ボーダーの種類　(border-style)

ボーダーの種類を指定します。

hr 要素の線の種類も指定できます。

border-style:属性値 属性値 ...

ボーダーの種類を一度に指定する。

属性値が一つだけのときは、上下左右同じ値

属性値が二つのときは、上下と左右の値

属性値が三つのときは、上と左右と下の値

属性値が四つのときは、上と右と下と左の値

また、hr 要素の線の種類も指定できる（属性値は一つ）。

属性値説明
none境界線を引かない（規定値）
hidden境界線を表示しない。none とほぼ同等
dotted点線
　　　　　　　　　　 
dashed破線
　　　　　　　　　　 
solid実線
　　　　　　　　　　 
double二重線
　　　　　　　　　　 
groove立体的に窪んだ線

　　　　　　　　　　 
ridge立体的に隆起した線

　　　　　　　　　　 
insetボックス全体が窪んだようにみえる線

　　　　　　　　　　 
outsetボックス全体が隆起したようにみえる線

　　　　　　　　　　 
記述例
<div style="width:10em;border-style:dashed solid double dotted;">上と右と下と左、全部別の種類</div><br>
<div style="width:10em;border-style:none outset outset;">上だけボーダーがない</div><br>
<hr style="border-style:dotted;">
表示例

６．１．３ 上下左右のボーダーの色　(border-top-color、border-bottom-color、border-left-color、border-right-color)

上下左右のボーダーの色を指定します。

border-top-color、border-bottom-color、border-left-color、border-right-color:属性値

上下左右のボーダーの色を指定する。

属性値説明
色色を名称や１６進数で指定する（属性値の色を参照）
記述例
<span style="border-style:solid;border-top-color:blue;">border-top-color</span>　
<span style="border-style:solid;border-bottom-color:green;">border-bottom-color</span>　
<span style="border-style:solid;border-left-color:red;">border-left-color</span>　
<span style="border-style:solid;border-right-color:yellow;">border-right-color</span>
表示例

６．１．４ ボーダーの色　(border-color)

ボーダーの色を一度に指定します。

hr 要素の線の色も指定できます。

border-color:属性値

ボーダーの色を一度に指定する。

属性値が一つだけのときは、上下左右同じ値

属性値が二つのときは、上下と左右の値

属性値が三つのときは、上と左右と下の値

属性値が四つのときは、上と右と下と左の値

また、hr 要素の線の色も指定できる（属性値は一つ）。

属性値説明
色色を名称や１６進数で指定する（属性値の色を参照）
記述例
<div style="width:10em;border-style:solid;border-color:blue yellow green red;">上と右と下と左、全部別の色</div><br>
<div style="width:10em;border-style:solid;border-color:transparent blue blue;">上だけボーダーがない</div><br>
<hr style="border-color:blue;">
表示例

６．１．５ 上下左右のボーダーの太さ　(border-top-width、border-bottom-width、border-left-width、border-right-width)

上下左右のボーダーの太さを指定します。

border-top-width、border-bottom-width、border-left-width、border-right-width:属性値

上下左右のボーダーの太さを指定する。

属性値説明
数値ボーダーの太さ（数値＋単位）
thin細いボーダー（1px）
medium中くらいのボーダー（3px）（規定値）
thick太いボーダー（5px）
記述例
<span style="border-style:solid;border-top-width:10px;">border-top-width</span>　
<span style="border-style:solid;border-bottom-width:10px;">border-bottom-width</span>　
<span style="border-style:solid;border-left-width:10px;">border-left-width</span>　
<span style="border-style:solid;border-right-width:10px;">border-right-width</span>
表示例

６．１．６ ボーダーの太さ　(border-width)

ボーダーの太さを一度に指定します。

hr 要素の線の太さも指定できます。

border-width:属性値

ボーダーの太さを一度に指定する。

属性値が一つだけのときは、上下左右同じ値

属性値が二つのときは、上下と左右の値

属性値が三つのときは、上と左右と下の値

属性値が四つのときは、上と右と下と左の値

また、hr 要素の線の太さも指定できる（属性値は一つ）。

属性値説明
数値ボーダーの太さ（数値＋単位）
thin細いボーダー（1px）
medium中くらいのボーダー（3px）（規定値）
thick太いボーダー（5px）
記述例
<div style="width:10em;border-style:solid;border-width:1px 3px 5px 7px;">上と右と下と左、全部別の太さ</div><br>
<div style="width:10em;border-style:solid;border-width:0px 3px 3px;">上だけボーダーがない</div><br>
<hr style="border-width:thick;">
表示例

６．１．７ 上下左右のボーダー　(border-top、border-bottom、border-left、border-right)

上下左右のボーダーの種類、太さ、色をまとめて指定します。

border-top、border-bottom、border-left、border-right:属性値 属性値 ...

上下左右のボーダーの種類、太さ、色をまとめて指定する。

属性値説明
種類border-style の値
太さborder-width の値
色border-color の値
記述例
<div style="width:15em;border-top:dashed 5px orange;border-bottom:double 10px pink;">
        border-top:dashed 5px orange;<br>border-bottom:double 10px pink;</div><br>
<div style="width:15em;border-left:dotted 5px lightgreen;border-right:groove 10px darkgreen;">
        border-left:dotted 5px lightgreen;<br>border-right:groove 10px darkgreen;</div><br>
表示例

６．１．８ ボーダー　(border)

ボーダーの種類、太さ、色をまとめて指定します。

hr 要素の線の種類、太さ、色も指定できます。

border:属性値 属性値 ...

ボーダーの種類、太さ、色をまとめて指定する。

また、hr 要素の線の種類、太さ、色も指定できる。

属性値説明
種類border-style の値
太さborder-width の値
色border-color の値
記述例
<div style="width:15em;border:groove 10px sienna;">border:groove 10px sienna</div><br>
<div style="width:15em;border:inset 10px sienna;">border:inset 10px sienna</div><br>
<hr style="border:dashed thick gray;">
表示例

６．２　　角丸ボーダー

角の丸いボーダーについて説明します。

垂直方向の半径 水平方向の半径

角丸とは、指定された半径の楕円の一部でボーダーの角を置き換えた形になります。

６．２．１ 個別の角丸　(border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius)

左上、右上、左下、右下のボーダーの角丸（頂点の形状）を指定します。

border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius:属性値 ...

左上、右上、左下、右下のボーダーの角丸を指定する。

属性値が二つのときは水平方向と垂直方向の半径となる。1つだけのときは水平方向・垂直方向とも同じ値になる。

属性値説明
数値半径（数値＋単位）（規定値：0）
パーセント親要素の高さに対するパーセント（数値%）
記述例
<span style="border:solid 1px black;border-top-left-radius:10px;">top-left</span>　
<span style="border:solid 1px black;border-top-right-radius:30%;">top-right</span>　
<span style="border:solid 1px black;border-bottom-left-radius:30px 10px;">bottom-left</span>　
<span style="border:solid 1px black;border-bottom-right-radius:10px 20px;">bottom-right</span>
<br><br>

<span style="background-color:cyan;border-top-left-radius:10px;border-top-right-radius:10px;">top-left　top-right</span>
<br><br>

<div style="width:200px;height:30px;border:solid 5px palegreen;border-bottom-left-radius:40px 20px;
            border-bottom-right-radius:40px 20px;">bottom-left　bottom-right</div>
表示例

６．２．２ 角丸　(border-radius)

ボーダーの角丸（頂点の形状）をまとめて指定します。

border-radius:属性値 ...

ボーダーの角丸をまとめて指定する。

属性値が４つのときは、左上、右上、右下、左下となる。

属性値が３つのときは、左上、右上と左下、右下となる。

属性値が２つのときは、左上と右下、右上と左下となる。

属性値が１つのときは、すべてが同じ値となる。

また、一つの角で水平方向の半径と垂直方向の半径を別に指定したい場合は、水平方向 .../垂直方向 ... のようにスラッシュで区切る。

属性値説明
数値半径（数値＋単位）（規定値：0）
パーセント親要素の高さに対するパーセント（数値%）
記述例
<div style="width:200px;height:50px;border:solid 5px orange;border-radius:40px/20px;">border-radius</div>

<div style="width:150px;height:80px;border:solid 20px skyblue;background-color:mintcream;
                border-radius:100px 25px 50px 50px / 50px 25px 50px 25px;">border-radius</div>

なお、理解の助けになるように文字列を別途表示しています。

表示例

６．３　　画像ボーダー

ボーダーに使用する画像ファイルを指定します。

画像は上下左右など、それぞれのボーダー用に必要となるわけではなく、１枚の画像でボーダーを実現します。なお、オレンジ色の線は分割位置を分かりやすくするために後から描いています。






画像ファイルは９個の部分に分割され、それらがボーダーに敷き詰められることになります。


属性説明
border-image-sourceボーダーの画像
border-image-slice画像分割
border-image-width画像ボーダーの太さ
border-image-outset画像ボーダーの広さ
border-image-repeat画像ボーダーの繰り返し方法
border-image画像ボーダー

６．３．１ ボーダーの画像　(border-image-source)

ボーダーに使用する画像ファイルを指定します。

border-image-source:属性値 ...

ボーダーに使用する画像ファイルを指定する。

属性値説明
noneボーダーに画像を使用しない（規定値）
URIボーダーに使用する画像ファイルのURI
記述例
スタイルシート
  div {
    width:200px;
    height:30px;
    border:solid 12px;
    border-image-slice:12;
    border-image-repeat:round;
  }

ボディ
<div style="border-image-source:url('lines.png');">border-image-source</div>
表示例

６．３．２ 画像分割　(border-image-slice)

ボーダーに使用する画像ファイルを分割する位置を指定します。

border-image-slice:属性値 ... fill

ボーダーに使用する画像ファイルを分割する位置を指定する。

属性値が４つのときは、画像の上端、右端、下端、左端からの距離となる。

属性値が３つのときは、上端、右端と左端、下端となる。

属性値が２つのときは、上端と下端、右端と左端となる。

属性値が１つのときは、すべてが同じ値となる。

属性値説明
数値ピクセル値（単位なし）
パーセント親要素の高さに対するパーセント（数値%）（規定値：100%）
fillスライス後の画像の中央部分が破棄されない
記述例
35 10 20 35 
スタイルシート
  div {
    width:200px;
    height:50px;
    border-style:solid;
    border-image-width:35px 10px 20px 35px;
    border-image-source:url('clip.png');
    border-image-repeat:round;
  }

ボディ
<div style="border-image-slice:35 10 20 35 fill;"><br><br>　　　border-image-source</div>

fill を指定していますので、真ん中の部分も画像で埋められています。

表示例

６．３．３ 画像ボーダーの太さ　(border-image-width)

画像ボーダーの太さを指定します。

border-image-width:属性値 ...

画像ボーダーの太さを指定する。

属性値が４つのときは、画像の上端、右端、下端、左端の太さとなる。

属性値が３つのときは、上端、右端と左端、下端となる。

属性値が２つのときは、上端と下端、右端と左端となる。

属性値が１つのときは、すべてが同じ値となる。

属性値説明
数値太さ（数値＋単位）（規定値：1）
パーセント親要素の高さに対するパーセント（数値%）
倍率border-width に対する倍数
autoborder-image-slice と同じ値
記述例
スタイルシート
  div {
    width:200px;
    height:50px;
    border-style:solid;
    border-width:35px 10px 20px 35px;
    border-image-slice:35 10 20 35 fill;
    border-image-source:url('clip.png');
    border-image-repeat:round;
  }

ボディ
<div style="border-image-width:0.5;">border-image-width</div>

画像ボーダーの太さを半分にしています。

表示例

パーセントは正しく機能しないかもしれません。

６．３．４ 画像ボーダーの広さ　(border-image-outset)

ボーダーボックスを超えて画像ボーダーエリアを広げる量を指定します。

画像ボーダーエリアとは画像ボーダーが描かれる領域のことで、初期値ではボーダーボックスと同じ領域ですが、border-image-outset を指定することで、そこから外側に広げることができます。

ただし、外側に広げられた画像ボーダー部分は、内部に文章を表示することはできませんし、スクロールの対象にもなりません。また、マウスイベントが発生することもありません。

border-image-outset:属性値 ...

ボーダーボックスを超えて画像ボーダーエリアを広げる量を指定する。

属性値が４つのときは、上、右、下、左方向の広げる長さになる。

属性値が３つのときは、上、右と左、下となる。

属性値が２つのときは、上と下、右と左となる。

属性値が１つのときは、すべてが同じ値となる。

属性値説明
数値太さ（数値＋単位）
倍率border-width に対する倍数（規定値：1）
記述例

 
 
 
 
 

スタイルシート
  div {
    width:200px;
    height:30px;
    border:solid 12px;
    border-image-slice:12;
    border-image-source:url('lines.png');
    border-image-repeat:round;
  }

ボディ
<table>
<tr><td>
  <div>border-image-outset</div>
  <div style="border-image-outset:0 100px 0 0;">border-image-outset:0px 100px 0px 0px;</div>
</td><td>
  <div style="border-image-outset:0 0 50px 0;">border-image-outset</div>
</td></tr>
</table>

左上が標準のボーダーです。その下が右方向に 100px 広げています（ただし、内部の文章を表示する領域は広がりません）。右側は下方向に 30px 広げています。広げた部分同士は重なりあいます。

なお、理解の助けになるように別途背景色を付けています。

表示例

６．３．５ 画像ボーダーの繰り返し方法　(border-image-repeat)

画像ボーダーの繰り返し方法を指定します。

border-image-repeat:属性値 ...

画像ボーダーの繰り返し方法を指定する。

属性値が２つのときは、水平方向、垂直方向となる。

属性値が１つのときは、すべてが同じ値となる。

属性値説明
stretch画像が引き伸ばされて領域を埋める（規定値）
repeat画像がタイル状に繰り返されて領域を埋める
round画像がタイル状に繰り返されて領域を埋めるが、タイルが整数で並ばない場合には、並ぶように画像が拡大縮小される
space画像がタイル状に繰り返されて領域を埋めるが、タイルが整数で並ばない場合には、余ったスペースがタイルの周囲に分配される
記述例

 
 
 
 
 

スタイルシート
  div {
    width:90px;
    height:50px;
    border:solid 20px;
    border-image-slice:20 fill;
    border-image-source:url('balls.png');
    border-image-repeat:round;
  }

ボディ
  <div style="border-image-repeat:stretch;">stretch</div>
  <div style="border-image-repeat:repeat;">repeat</div>
  <div style="border-image-repeat:round;">round</div>
  <div style="border-image-repeat:space;">space</div>
表示例

６．３．６ 画像ボーダー　(border-image)

画像ボーダーについてまとめて指定します。

記述例

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

スタイルシート
      div.f1 {
        width:70px;
        border:solid 20px;
      }
      div.f2 {
        width:140px;
        border-top:solid 41px;
        border-right:solid 50px;
        border-bottom:solid 45px;
        border-left:solid 45px;
      }
      div.f3 {
        border-top:solid 20px;
        border-right:solid 15px;
        border-bottom:solid 21px;
        border-left:solid 20px;
        padding-left:-80px;
      }

ボディ
  <div class="f1" style="border-image:url('flower1.png') 20 / 20px space;">slice:20<br>width:20px<br>space</div>
  <div class="f2" style="border-image:url('flower2.png') 41 50 45 45 fill / auto stretch;">
                   slice:41 50 45 45 fill<br>width:auto<br>repeat:stretch</div>
  <div class="f3" style="border-image:url('balloon.png') 20 15 21 20 fill / auto stretch;">
                   slice:20 15 21 20 fill<br>width:auto<br>repeat:stretch</div>
表示例

６．４　　ボックス影

ボックスに1つまたは複数の影を付ける際に使用します。

６．４．１ ボックス影　(box-shadow)

ボックスに付ける、1つまたは複数の影を指定します。

box-shadow:属性値 ...

ボックスに付ける影を指定する。

属性値説明
none影を付ない（規定値）
影情報,（コンマ）区切りで、複数指定することができ、影をいくつも付けることができる。
属性値説明必須
水平方向の長さ数値＋単位○
垂直方向の長さ数値＋単位○
影のぼかし範囲影のぼかし範囲（数値＋単位）（値が大きいほど影の端がぼやける）（規定値：0）×
影の拡張正の値は影の形を拡張させ、負の値は影の形を収縮させる（数値＋単位）（規定値：0）×
影の色色を名称や１６進数で指定する（属性値の色を参照）×
inset影をボックスの内部に表示する×
記述例
スタイルシート
  p {
    width:100px;
    height:50px;
    text-align:center;
    vertical-align:middle;
    position:relative;
    border:solid 10px skyblue;
    background-color:mintcream;
    border-radius:100px 25px 50px 50px / 50px 25px 50px 25px;
  }

ボディ
  <p style="box-shadow: none;"><br>影なし</p>
  <p style="box-shadow: 5px 5px 10px 0px gray;"><br>外側の影</p>
  <p style="box-shadow: 5px 5px 10px 0px gray inset;"><br>内側の影</p>
  <p style="box-shadow: 5px 5px 10px 0px gray, 5px 5px 10px 0px gray inset;"><br>両方の影</p>
  
  <p style="box-shadow: 5px 5px 0px 0px gray, 5px 5px 0px 0px gray inset;"><br>ぼかしなし</p>
  <p style="box-shadow: 5px 5px 5px 0px gray, 5px 5px 5px 0px gray inset;"><br>ぼかし:5px</p>
  <p style="box-shadow: 5px 5px 10px 0px gray, 5px 5px 10px 0px gray inset;"><br>ぼかし:10px</p>
  <p style="box-shadow: 5px 5px 20px 0px gray, 5px 5px 20px 0px gray inset;"><br>ぼかし:20px</p>
  
  <p style="box-shadow: 5px 5px 10px -5px gray, 5px 5px 10px -5px gray inset;"><br>拡張:-5px</p>
  <p style="box-shadow: 5px 5px 10px 0px gray, 5px 5px 10px 0px gray inset;"><br>拡張:なし</p>
  <p style="box-shadow: 5px 5px 10px 10px gray, 5px 5px 10px 10px gray inset;"><br>拡張:10px</p>
  <p style="box-shadow: 5px 5px 10px 20px gray, 5px 5px 10px 20px gray inset;"><br>拡張:20px</p>
表示例