border-style - 枠線のスタイルをまとめて指定する
投稿日: / 更新日:
スタイルシートのborder-styleは、枠線のスタイルをまとめて指定するためのプロパティです。
サンプルコード
border-styleを指定した例です。このプロパティの指定を有効にするには、あらかじめ枠線を用意して下さい。
div {
border: 10px solid #333 ;
border-style: dotted ;
}デモ
border-styleをまとめて指定した例です。枠線のスタイルが上下左右、別々になっているのを確認して下さい。CSSタブを編集して、どのように表示が変わるか試してみて下さい。
値の指定
基本的に、値には「上枠」「右枠」「下枠」「左枠」の順に、スペースで区切って4つの値を指定します。例えば、double dotted solid dashedと指定すれば、上枠にdouble、右枠にdotted、下枠にsolid、左枠にdashedが適用されます。上(12時)から、右回りになる時計と同じです。時計回りということを覚えておきましょう。
応用として、2つの値を指定すると1つ目の値が「上枠」と「下枠」、2つ目の値が「右枠」と「左枠」と、十字の形のように適用されます。縦に斬って、横に斬るイメージです。また、1つの値を指定すると、全ての枠に適用されます。
/* 基本は4つの値を指定する */
/* [1]上 → [2]右 → [3]下 → [4]左 */
#element {
border-style: double dotted solid dashed ;
}
/* 2つの値を指定すると「上下」「左右」に適用される */
/* [1]上下 → [2]左右 */
#element {
border-style: double dotted ;
}
/* 1つの値を指定すると「上下左右」に適用される */
/* [1]上下左右 */
#element {
border-style: double ;
}個々の値の指定方法は下記の通りです。リンクをクリックすると、デモを確認できます。
| 項目 | 説明 |
|---|---|
| inherit | 親要素の値を引き継ぐ。例の場合、div要素のborder-styleには、bodyに指定された値(dotted)が引き継がれる。 |
| initial | プロパティの初期値が適用される。この場合、noneとなる。 |
| none | 枠線は表示されない。 |
| hidden | 枠線は表示されない。noneと同じ。 |
| dotted | ドットのスタイル。 |
| dashed | 短い線のスタイル。 |
| solid | ノーマルな線のスタイル。 |
| double | 二重線のスタイル。色が塗られた線が2本と塗られていない線が1本。3つの線がありますが、その太さは三等分になっています。 |
| groove | 額縁のように、内側が濃くなる。ridgeの逆。 |
| ridge | 額縁のように、外側が濃くなる。grooveの逆。 |
| inset | 額縁のように、上側、右側が濃くなる。outsetの逆。 |
| outset | 額縁のように、下側、左側が濃くなる。insetの逆。 |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。
Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明