もっと"Try it Yourself"以下の例。
定義と使用法
border-styleプロパティは、要素の4境界線のスタイルを設定します。 このプロパティは、1から4の値にすることができます。
例：
- border-style:dotted solid double dashed;
- 上部の境界線が点在しています
- 右側の境界線が固体であります
- 下の境界はdoubleです
- 左の境界線が破線れます
- border-style:dotted solid double;
- 上部の境界線が点在しています
- 左右の境界は固体であります
- 下の境界はdoubleです
- border-style:dotted solid;
- 上部と下部の境界が点在しています
- 左右の境界は固体であります
- border-style:dotted;
- すべての4つの境界線が点在しています
| デフォルト値： | none |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS1 |
| JavaScriptシンタックス： | object .style.borderStyle="dotted double" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note:値は"hidden" IE7以前ではサポートされていません。 IE8は、！のDOCTYPEが必要です。 IE9以降でサポート"hidden" 。
CSSの構文
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| none | デフォルト値。 境界線を指定しません | それを再生します» |
| hidden | 同じ"none"表要素のための国境紛争の解決を除いて、 | それを再生します» |
| dotted | 点線の枠線を指定します。 | それを再生します» |
| dashed | 破線の枠線を指定します。 | それを再生します» |
| solid | 固体の境界線を指定します。 | それを再生します» |
| double | 二重枠を指定します。 | それを再生します» |
| groove | 3D溝付きボーダーを指定します。 効果はボーダー色の値に依存します | それを再生します» |
| ridge | 3D畝状境界線を指定します。 効果はボーダー色の値に依存します | それを再生します» |
| inset | 3Dインセットの境界線を指定します。 効果はボーダー色の値に依存します | それを再生します» |
| outset | 3D当初の境界線を指定します。 効果はボーダー色の値に依存します | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
例
要素のそれぞれの側に異なるボーダーを設定します。
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} »それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSボーダー
HTML DOMリファレンス： borderStyle property