border
borderプロパティの役割
borderプロパティは、要素の枠線の幅、形状、色を一括して指定します。
つまり、border-width、border-style、border-colorの3つのプロパティを指定することができます。
borderプロパティを使った場合、それまでに上記3つのプロパティを指定していても、初期値にリセットされます。
なお、borderプロパティでは、上下左右を個別に設定することはできません。
borderプロパティに設定できる値
枠線の幅
| 数値 | 整数+単位。 |
| % | ボックスの高さや幅に対して100分率で設定。 |
| thin | 太い枠線。 |
| medium | 中位の太さの枠線。 |
| thick | 細い枠線。 |
枠線の形状
| dashed | 破線。 |
| dotted | 点線。 |
| double | 二重線。 |
| groove | 凹んだように表示。 |
| hidden | 枠線を表示しない。 |
| inset | 沈むように表示。 |
| none | 枠線を表示しない。又は隣接するセルのborder-styleプロパティを反映する。初期値。 |
| outset | 浮き上がるように表示。 |
| ridge | 盛り上がるように表示。 |
| solid | 実線(直線)。 |
枠線の色
| 16進数 | #FFFFFF又は#FFF(白の場合) |
| RGB3原色 | rgb(255,255,255)又はrgb(100%,100%,100%)(白の場合) |
| 色名 | white(白の場合)。色名一覧参照 |
| inherit | 上位要素の色を反映。 |
| transparent | 透明。上位要素の背景を表示する。 |
borderプロパティの使い方
<table style="border:5px solid #000000;">
<tr><td> </td></tr>
</table>
上のサンプルは、太さ5ピクセル、直線、黒色の枠線を表示しています。
関連リンク
- プロパティリファレンス:border-style
- プロパティリファレンス:border-width
- プロパティリファレンス:border-color
- プロパティリファレンス:border-collapse
- プロパティリファレンス:border-spacing
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-7-21
