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

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

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

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

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

borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定します。
上下左右のボーダーを個別に指定する場合は、border-top、border-bottom 、border-left 、border-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