border-style CSS プロパティとは
トピック：個々の境界スタイルプロパティ、これは border-top-style、border-right-style、border-bottom-style、border-left-styleを1つの宣言で設定するための簡略化されたプロパティ
プロパティ border-style
実例 コード 1
サンプル コードを試すp { border-style: double; border-width: 5px;}
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | 全要素。 ::first-letter にも適用される |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
CSS Version | CSS1 ～ |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | object.style.borderStyle="dotted double" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | border-style: none |hidden |dotted |dashed |solid |double |groove |ridge |inset |outset |initial |inherit; |
|---|
情報：border-style プロパティは1つ、2つ、3つ、4つの値を使って指定することができる- 値が1つ指定された場合、全4辺に同じスタイルが適用される
- 値が2つ指定された場合、1つ目のスタイルは上下、2つ目は左右の辺に適用される
- 値が3つ指定された場合、1つ目のスタイルは上、2つ目は左右、3つ目は下の辺に適用される
- 値が4つ指定された場合、スタイルはそれぞれ上、右、下、左の順（時計回り）に適用される
プロパティ値
| 値 | 説明 |
|---|
none | デフォルト値。境界線を指定しない |
hidden | "none"と同じ、ただし、表要素の境界矛盾の解決を除く |
dotted | 点線の枠線を指定する |
dashed | 破線の枠線を指定する |
solid | 実線の境界線を指定する |
double | ダブルボーダーを指定する |
groove | 3Dグルーブの境界線を指定する 効果はボーダーカラー値に依存する |
ridge | 3D稜線を指定する 効果はボーダーカラー値に依存する |
inset | 3Dインセット境界を指定する 効果はボーダーカラー値に依存する |
outset | 3D開始境界線を指定する 効果はボーダーカラー値に依存する |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
実例 コード 2
サンプル コードを試すborder-style: none;
/* hidden キーワードと同様に、境界線を表示しない*/
情報：hidden キーワードと同様に、境界線を表示しないbackground-image を設定している場合を除き、プロパティで別に指定していても border-width の計算値は 0 になりる テーブルのセルで境界線が collasped 形式である場合は、 none 値は最も低い優先度になりる ほかに競合する境界線が設定されている場合も、そちらが 表示 される 。-
実例 コード 3
サンプル コードを試すborder-style: hidden;
/* none キーワードと同様に、境界線を表示しない */
情報：none キーワードと同様に、境界線を表示しないbackground-image を設定している場合を除き、プロパティで別に指定していても border-width の計算値は 0 になりる テーブルのセルで境界線が collasped 形式である場合は、 hidden 値は最も高い優先度になりる ほかに競合する境界線が設定されている場合も、非表示になる 。-
実例 コード 4
サンプル コードを試すborder-style: dotted;
border-width: 3px;
/* 連続した丸い点を表示する*/
情報：連続した丸い点を表示する 点の間の空白の量は仕様書で定義されていない 実装依存。点の半径は border-width の計算値の半分-
実例 コード 5
サンプル コードを試すborder-style: dashed;
border-width: 3px;
/* 連続したダッシュや線分を表示する*/
情報：連続した破線を表示する 線分の実寸や長さは仕様書で定義されていない 実装依存-
実例 コード 6
サンプル コードを試すborder-style: solid;
border-width: 3px;
/* 実線を表示する*/
実例 コード 7
サンプル コードを試すborder-style: double;
border-width: 3px;
/* 2重線を表示する*/
実例 コード 8
サンプル コードを試すborder-style: groove;
border-width: 8px;
/* 凹状に見える境界線を表示する*/
情報：凹状に見える境界線を表示する ridge の逆 -
実例 コード 9
サンプル コードを試すborder-style: ridge;
border-width: 8px;
/* 凸状に見える境界線を表示する*/
情報：凸状に見える境界線を表示するgroove の逆 -
実例 コード 10
サンプル コードを試すborder-style: inset;
border-width: 3px;
/*ボックスが埋め込まれて見える境界線を表示する*/
情報：ボックスが埋め込まれて見える境界線を表示するoutset の逆 。border-collapse が collapsed に設定されたテーブルのセルに適用する場合 この値は groove のように振る舞う-
実例 コード 11
サンプル コードを試すborder-style: outset;
border-width: 3px;
/*ボックスが押し出された見える境界線を表示する*/
情報：ボックスが押し出された見える境界線を表示するinset の逆 border-collapse を collapsed に設定したテーブルセルに適用すると、この値は ridge のように振る舞う-
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| border-style | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯3.5 | フルサポート◯1 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| border-style | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2.6 | 不明 | フルサポート◯12 | フルサポート◯4 | フルサポート◯あり | フルサポート◯3 | 不明 |
|---|
CSS border-style | CSS プロパティ 値| 意味 使い方 実例 – WebRef