WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > border
border  ボーダー 

ボーダーのスタイル・太さ・色を設定。

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

borderプロパティは上下左右を一括指定しかできません。


borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定します。
上下左右のボーダーを個別に指定する場合は、border-topborder-bottomborder-leftborder-right を用います。

書式

border: 太さ スタイル 色 ; (例) border : 1px solid red ;

パラメーター

太さ
・数値+単位で指定。 (例)3px 2em
・キーワードで指定。 (例)thin(細い)、medium(普通)、thick(太い)

スタイル
・none 非表示・太さ0。
・hidden 非表示・太さ0。
・solid 1本線。
・double 2本線。
・dashed 破線。
・dotted 点線。
・groove 立体的に窪んだ線。
・ridge 立体的に隆起した線。
・inset 立体的に窪んだ線。
・outset 立体的に隆起した線


・#000000 といったカラーコードや redやblueといったカラーネームで色指定。
・transparent 透明。

サンプルコード(線の種類)

<div style="margin:5px; border:1px solid #ccc;">solid</div>
<div style="margin:5px; border:1px double #ccc;">double</div>
<div style="margin:5px; border:1px groove #ccc;">groove</div>
<div style="border:1px dashed #ccc;">dashed</div>
<div style="border:1px dotted #ccc;">dotted</div>
<div style="border:1px ridge #ccc;">ridge</div>
<div style="border:1px inset #ccc;">inset</div>
<div style="border:1px outset #ccc;">outset</div>
<div style="border:none;">none</div>
<div style="border:hidden;">hidden</div>
solid
double
groove
dashed
dotted
ridge
inset
outset
none
hidden

サンプルコード(太枠)

<span style="border:5px solid red;">solid</span>
<span style="border:5px groove orange;">groove</span>
<span style="border:5px dashed #f05050;">dashed</span>
<span style="border:5px dotted #ccc;">dotted</span
solid groove dashed dotted