|
border-color線の色を指定する
使用例 div { border-color: #000000; }
値はRGB値か、キーワードもしくはtransparent（透明）を使用します
transparent は枠線の幅は確保されたまま透明で表示され、背景色が見えます。
border-style線のスタイルを指定する
使用例 div { border-style: solid; } div { border-style: double; }
指定がない場合はnoneで適用されます。
スタイルの種類
| none |
枠線を表示しません |
| solid |
実線 |
| double |
二重線 |
| dotted |
点線 |
| dashed |
破線 |
border-width線の太さを指定する
使用例 div { border-width: 1px; }
使用例のように数値＋単位以外にもキーワードで指定が出来ます。指定がない場合はmediumで適用されます。
キーワードで枠線の幅を指定する場合
| thin |
細い線 |
| medium |
通常の線 |
| thick |
太い線 |
いろいろな枠線の指定方法
border-color :#0000ff; 上下左右の線色を指定
border-color :#0000ff #000000; 順に上下と左右の線色を指定
border-color :#0000ff #000000 #ff0000 #00ff00; 順に上右下左の線色を指定
border-top-color :#0000ff; 上の線色を指定
border-right-color :#0000ff; 右の線色を指定
border-bottom-color :#0000ff; 下の線色を指定
border-left-color :#0000ff; 左の線色を指定
|
border-style :solid; 上下左右の線種を指定
border-style :solid dotted; 順に上下と左右の線種を指定
border-style :solid dotted dashed none; 順に上右下左の線種を指定
border-top-style :solid; 上の線種を指定
border-right-style :solid; 右の線種を指定
border-bottom-style :solid; 下の線種を指定
border-left-style :solid; 左の線種を指定
|
border-width :1px; 上下左右の線の太さを指定
border-width :1px 2px; 順に上下と左右の線の太さを指定
border-width :1px 2px 3px 4px; 順に上右下左の線の太さを指定
border-top-width :1px; 上の線の太さを指定
border-right-width :1px; 右の線の太さを指定
border-bottom-width :1px; 下の線の太さを指定
border-left-width :1px; 左の線の太さを指定
|
まとめて線のスタイルを指定する
基本的には以下のような書き方をすれば下のように表示されます。
div { border: 1px solid #ff0000; }
サンプル
|
