トップ > スタイルシートテクニック > ボーダーのデザインを指定する

ボーダーのデザインを指定する

スポンサード リンク

色を指定する

まとめて指定する場合：
border-color : 色; (上下左右)
border-color : 色 色; (上下/左右)
border-color : 色 色 色; (上/左右/下)
border-color : 色 色 色 色; (上/右/下/左)
個別に指定する場合：
border-top-color : 色;
border-bottom-color : 色;
border-left-color : 色;
border-right-color : 色;
色は「#FFFFFF」などの16進数表記や「white」などのカラーネーム表記が出来ます。

幅を指定する

border-width : 数値+単位;
複数指定の仕方は「border-color」と同じです。

スタイルを指定する

border-style : スタイル;
複数指定の仕方は「border-color」と同じです。
指定できるスタイルは以下の通り。
none
 枠無し
none
dotted
 点線
dotted
dashed
 粗い点線
dashed
solid
 実線
solid
double
 二重線
double
groove
 枠が凹型
groove
ridge
 枠が凸型
ridge
inset
 セルが凹型
inset
outset
 セルが凸型
outset

色・幅･スタイルをまとめて指定する

border : 幅 スタイル 色;
上下左右の個別指定は「border-color」と同じです。

以下はサンプルです。
border:3px double #3399ff;