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

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

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

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

書式

border-bottom: 太さ スタイル 色 ; (例) border-bottom: 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-bottom:1px solid #ccc;">solid</div>
<div style="margin:5px; border-bottom:1px double #ccc;">double</div>
<div style="margin:5px; border-bottom:1px groove #ccc;">groove</div>
<div style="border-bottom:1px dashed #ccc;">dashed</div>
<div style="border-bottom:1px dotted #ccc;">dotted</div>
<div style="border-bottom:1px ridge #ccc;">ridge</div>
<div style="border-bottom:1px inset #ccc;">inset</div>
<div style="border-bottom:1px outset #ccc;">outset</div>
<div style="border-bottom:none;">none</div>
<div style="border-bottom:hidden;">hidden</div>
solid
double
groove
dashed
dotted
ridge
inset
outset
none
hidden

サンプルコード(太枠)

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