CSS リファレンスマニュアル

CSS @规则(RULES)

CSS 属性大全

CSS border-style属性の使用方法と例

border-style CSS属性は、単一のボーダースタイル属性を設定するためのものです、すなわちborder-top-style、border-right-style、border-bottom-styleおよびborder-left-styleのショートカット属性。

以下のテーブルは、この属性の使用方法とバージョンハイストリと、javascriptスクリプトでの使用構文を示しています。

デフォルト値：	none
適用対象：	すべての要素
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS 1、2、3
JavaScriptの構文：	object object.style.borderStyle="dotted double"

border-styleの使用構文

この属性の構文は以下の通りです：

border-style:　[　none　|　hidden　|　dotted　|　dashed　|　solid　|　double　|　groove　|　ridge　|　inset　|　outset　]　1　to　4　values　|　initial　|　inherit

この記号は、1、2、3、または4つのスペースで区切られた値を1つ、2つ、3つ、または4つに使用できます。

指定された場合1つの値、すべての4つのボーダーに適用されます。
指定された場合2つの値、最初の値はトップおよびボトムボーダーに適用され、2番目の値は右および左ボーダーに適用されます。
指定された場合3つの値、最初の値はトップボーダーに適用され、2番目の値は左右ボーダーに適用され、3番目の値はボトムボーダーに適用されます。
指定された場合4つの値、それぞれの値は上、右、下、左の順番でボーダーに適用されます。

以下の例では、borderの使用方法を示しています。-style属性。

例

　　p　{
　　　border-style:　double;
　　　border-width:　5px;
　　}

テストして‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
none	ボーダーが表示されません。
hidden	同じnoneと異なり、テーブルセルには折りたたみボーダーそして2つのセルがボーダーを共有します。このhidden値は、他のすべてのボーダースタイルよりもhiddenが優先されるため、ボーダーを描画しないことを確実にします。
dotted	ボーダーを点のシリーズとして表示します。
dashed	ボーダーを短い線のシリーズとして表示します、つまりダッシュです。
solid	ボーダーを1本の実線として表示します。
double	ボーダーを2本の平行な実線として表示し、その間に一定の間隔を置きます。2本の線の合計およびその間の間隔は、border-widthの値。
groove	キャンバスに彫り込まれたボーダーを表示します。それは3Dの印象、通常、ボーダーカラーborder-color明るくて暗い2色の影を作成して実現します。
ridge	効果とは反対のボーダーを表示します。また、3Dの印象、ボーダーがキャンバスから出てくるように見えます。
inset	表示して、要素のボックスがキャンバスに埋め込まれているように見えます。それは3D、これは通常、影の2色を作成して、ボーダーカラーborder-color少し明るくて濃いです。
outset	効果とは反対のインセットのボーダーを表示します。また、3Dの印象、ボックスがキャンバスから出てくるように見えます。
inherit	指定された場合、関連する要素は親要素のborderを使用します。-top-styleの属性値。

ブラウザの互換性

border-style属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョン番号を示しています；すべての主要ブラウザがこの属性をサポートしています。

	ブラウザのサポート– Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

警告： Internet Explorer 7およびそれ以前のバージョンではhidden値をサポートしていません。IE8サポートしていますが、<!DOCTYPE>。IE9およびそれ以降のバージョンがこのhidden値をサポートしています。

さらに詳しく

参照教材：CSS Border、CSS3 Border。

CSS border-top 属性 CSS border-spacing 属性