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

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

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

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

書式

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

サンプルコード(太枠)

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