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