border

Home>CSS>プロパティリファレンス>border

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

borderプロパティの役割

borderプロパティは、要素の枠線の幅、形状、色を一括して指定します。

つまり、border-widthborder-styleborder-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>&nbsp;</td></tr>
</table>

 

上のサンプルは、太さ5ピクセル、直線、黒色の枠線を表示しています。

関連リンク

よく読まれている記事

UpDate:2010-7-21