【border】ボーダーの色・太さ・スタイルを一括指定

borderプロパティでは、上下左右のボーダーの色・太さ・スタイルを一括で指定することができます。 ここで設定したものは上下左右すべて、同じ色、同じ太さ、同じスタイルとなります。

ただしborderプロパティでは、上下左右のボーダーをそれぞれ別々の設定にすることはできません。 各ボーダーごとに設定したい場合は、border-topborder-bottomborder-leftborder-rightなどを使用します。

borderプロパティの指定方法ですが、色・太さ・スタイルの中から必要な値を任意の順序で並べ、半角スペースで区切って指定します。 指定しなかった値については、各プロパティ(border-colorborder-widthborder-style)の初期値が設定されたことになります。

なおborder-style(スタイル)の値を指定しなかった場合は、初期値の「none」が設定され、ボーダーは表示されません。 ボーダー(枠線)を表示する場合は、「none」「hidden」以外をborder-styleの値に指定して下さい。

書式

  • border : ★ ■ ♥ ……… ボーダーの各プロパティ(色・太さ・スタイル)を一括で指定

★:border-colorの値(ボーダーの色)
■:border-widthの値(ボーダーの太さ)
♥:border-styleの値(ボーダーのスタイル)

border-colorの値(色)

RGB値、または「red」などのカラーネームで色を指定します。色についてはカラーコード一覧を参照下さい。
transparent
ボーダーの幅をそのまま確保し、色を透明にします。

border-widthの値(太さ)

実数値+単位
数値にpxなどの単位をつけてボーダーの太さを指定します。負の値は指定できません。
thin
細い線で表示します。
medium
中くらいの線で表示します。
thick
太い線で表示します。

border-styleの値(スタイル)

none
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、他の値が優先されます。(初期値)
hidden
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、この値(hidden)が優先されます。
dotted
点線で表示します
dashed
破線で表示します
solid
一本線で表示します
double
二重線で表示します
groove
へこんで見えるように見える立体的な線で表示します
ridge
浮き上がったように見える立体的な線で表示します
inset
ボーダーの内側がへこんだように見える立体的な線で表示します(ボーダーの上と左が暗色、下と右が明色となります。)
outset
ボーダーの内側が浮き上がったように見える立体的な線で表示します(ボーダーの上と左が明色、下と右が暗色となります。)

使用した時の例

.sample1 {border: solid 8px #F48282;}
.sample2 {border: double #0000FF;}
.sample3 {border: dotted;}
<div class="sample1">[スタイル]solid [太さ]8px [色]#F48282</div>
<div class="sample2">[スタイル]double [色]#0000FF</div>
<div class="sample3">[スタイル]dotted</div>

ブラウザ上の表示例

[スタイル]solid [太さ]8px [色]#F48282
[スタイル]double [色]#0000FF
[スタイル]dotted

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報