仕様

プロパティborder-style
値<line-style>{1,4}
一括/個別一括指定プロパティ
一括： border
個別： border-top-style, border-right-style, border-bottom-style, border-left-style
初期値none
適用対象「ruby base containers and ruby annotation containers」を除くすべての要素
継承なし
百分率なし
計算値指定どおり。
メディアvisual
border-styleプロパティは、要素の上下左右の境界線の線種に関してのプロパティを一括して設定します。

border-style プロパティは、要素の境界線の線種の上(border-top-style), 右(border-right-style), 下(border-bottom-style), 左(border-left-style) の値を単一の宣言で設定する一括指定プロパティです。
順番に意味があり指定する数にも意味があります。

上，右，下，左で一部を初期値などにしたい場合は、
border-top-style, border-right-style, border-bottom-style, border-left-style 等を用います。
値は上，右，下，左に個別の指定で値が１つであるだけで、border-style と同じ規則です。

  1. .cdvSample200 > div > div { border-style: solid; }
  1. <div class="cdvSample200">
  2. <div>
  3. <div>ボーダー</div>
  4. </div>
  5. </div>
ボーダー
参照元
  1. CSS Level 2 W3C 勧告. 8.5.3 Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
  2. CSS Level 1 W3C 勧告. 5.5.17 'border-style'
  3. border-style - CSS: カスケーディングスタイルシート | MDN

値の数

  1. cdvSample000 > div { }
  1. <div class="cdvSample000">
  2. <div style="outline: solid 1px;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。

例
  1. border-style: solid double dashed dotted;

値を４つ指定しました。値は 上，右，下，左 で設定されます。

例
  1. border-style: solid double dashed;

値を３つ指定しました。値は 上，左右，下 で設定されます。

例
  1. border-style: solid double;

値を２つ指定しました。値は 上下，左右 で設定されます。

例
  1. border-style: solid;

値を１つ指定しました。値は 上下左右 で設定されます。

例

<line-style> 値

  1. cdvSample000 > div { }
  1. <div class="cdvSample000">
  2. <div style="outline: solid 1px;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。

例
  1. border-style: none;

キーワード none を指定しました。none は、幅 0 で境界線を表示しません。none は、border-style の初期値です。

例
  1. border-style: hidden;

キーワード hidden を指定しました。hidden は、幅 0 で境界線を表示しません。none との違いは、collasped 形式での優先度です。

例
  1. border-style: dotted;

キーワード dotted を指定しました。dotted は、点線です。

例
  1. border-style: dashed;

キーワード dashed を指定しました。dashed は、破線です。

例
  1. border-style: solid;

キーワード solid を指定しました。solid は、実線(一本線)です。

例
  1. border-style: double;

キーワード double を指定しました。double は、二本線です。

例
  1. border-style: groove;

キーワード groove を指定しました。groove は、窪んだ線です。

例
  1. border-style: ridge;

キーワード ridge を指定しました。ridge は、尖った線です。

例
  1. border-style: inset;

キーワード inset を指定しました。inset は、要素が凹んで見える線です。

例
  1. border-style: outset;

キーワード outset を指定しました。outset は、要素が凸って見える線です。

例

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-style, border-right-style, border-bottom-style, border-left-style)を使用して設定します。

  1. cdvSample240 > div { padding: 0.5em; border: solid 0.5em #0000ff;}
  1. <div class="cdvSample240">
  2. <div>親<div style="outline: solid 1px;">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界線の記述は、継承の確認の為に記述しています。

親
子
  1. border-style: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。外側の線は親要素の境界線です。

親
子
  1. border-style: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-style プロパティの初期値は none です。親要素の境界線のみ表示されます。

親
子
  1. border-style: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-style プロパティは非継承プロパティなので初期値の none を設定します。親要素の境界線のみ表示されます。

親
子