border - 上下左右の枠線をまとめて指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのborderは、上下左右の枠線の各プロパティをまとめて指定するためのプロパティです。

サンプルコード

borderを指定したサンプルコードです。

div {
	border: 10px dotted #D36015 ;
}

デモ

borderを指定したデモです。色(border-color)は#D36015、サイズ(border-width)は10px、スタイル(border-style)はdottedを指定しています。CSSを編集して、どのように表示が変わるか確認してみましょう。

RUN
HTML
CSS
JavaScript

#element { border: 10px dotted #D36015 ; background: #f2f2f2 ; min-height: 140px ; margin: 20px auto ; }

値の指定

値は、border-color、border-width、border-styleの3つの値を、半角スペース( )で区切って指定します。順不同で大丈夫です。例えば「色だけは上下左右で分けたい」などと、3つ以上の値を指定することはできません。このプロパティで指定した場合、上下左右、全て同じ形の枠線になります。

/* 正しい */
#element {
	border: 10px dotted #D36015 ;
}

/* 正しい */
#element {
	border: #D36015 10px dotted ;
}

/* 間違い(3つの値を指定してない) */
#element {
	border: 10px dotted ;
}

個々の値の指定方法は主に下記の通りです。リンクをクリックすると、デモ、または専用ページを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border`には、`body`に指定された値(`10px dotted #D36015`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、枠線は表示されない。
border-color	上下左右の枠線の色を指定する。
border-style	上下左右の枠線のスタイルを指定する。
border-width	上下左右の枠線の幅を指定する。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明