CSS辞典 border-style、border-top-style、border-right-style、border-bottom-style、border-left-styleプロパティの解説

ボーダーのスタイルをまとめて指定する「border-styleプロパティ」、上辺のボーダースタイルを指定する「border-top-styleプロパティ右辺のボーダースタイルを指定する「border-right-styleプロパティ」、下辺のボーダースタイルを指定する「border-bottom-styleプロパティ」、左辺のボーダースタイルを指定する「border-left-styleプロパティの使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値none
適用される要素すべての要素
モジュールBackgrounds and Borders Module Level3
継承なし

※border-style、border-top-style、border-right-style、border-left-style、border-bottom-styleすべて同様。

border-styleプロパティ

概要・使用方法

{ border-style: -top -right -bottom -left;}

指定できる値はborder-styleのtop、right、bottom、leftのプロパティと同様です。それぞれ半角スペースで区切って指定します。4つまで指定できます、左から順に上辺、右辺、下辺、左辺の順に適用されます。省略した場合は次のようになります。

値が1つ上右下左にすべて同じ値を指定します。
値が2つ1つ目が上下、2つ目の値が左右に適用されます。
値が3つ1つ目が上、2つ目が左右、3目が下に適用されます。

指定可能なスタイル

以下のスタイルが指定できます。

noneボーダーは表示されません。
※他のボーダーと重なる場合は他の値が優先されます。
hiddennoneと同様に表示されません。
※他のボーダーと重なる場合、hiddenが優先されます。
dotted点線で表示されます。
dashed破線で表示されます。
solid1本の実線で表示されます。
double2本の実線で表示されます。最低、ボーダーの幅が3px以上必要になります。
groove立体的にくぼんだ線のような表示になります。
ridge立体的に浮き出るような線の表示になります。
inset四辺すべてに指定すると、ボーダーの内部が立体的にくぼんだような表示になります。
outset四辺すべてに指定すると、ボーダーの内部が立体的に浮き出るような表示になります。

border-top-styleプロパティ

上辺のボーダーのスタイルを指定できます。

概要・使用方法

{ border-top-style: スタイル;}

border-right-styleプロパティ

右辺のボーダーのスタイルを指定できます。

概要・使用方法

{ border-right-style: スタイル;}

border-bottom-styleプロパティ

下辺のボーダーのスタイルを指定できます。

概要・使用方法

{ border-bottom-style: スタイル;}

border-left-styleプロパティ

左辺のボーダーのスタイルを指定できます。

概要・使用方法

{ border-left-style: スタイル;}

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>border-styleプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
           .disp{display:inline-block;margin:0.5em;}
           .box-style{
               width: 20em;
               height: 5em;
               margin:0.5em;
               background-color:lightsteelblue;
           }
           
           .style-top{
               border-top-style:solid;
           }
           .style-right{
               border-right-style:solid;
           }
           .style-bottom{
               border-bottom-style:solid;
           }
           .style-left{
               border-left-style:solid;
           }
           .style-none{
               border-style:none;
           }
           .style-hidden{
               border-style:hidden;
           }
           .style-dotted{
               border-style:dotted;
           }
           .style-dashed{
               border-style:dashed;
           }
           .style-solid{
               border-style:solid;
           }
           .style-double{
               border-style:double;
           }
           .style-groove{
               border-style:groove;
           }
           .style-ridge{
               border-style:ridge;
           }
           .style-inset{
               border-style:inset;
           }
           .style-outset{
               border-style:outset;
           }
    </style>
  </head>
  <body>
      <div class="disp">
      <div class="box-style style-top">top</div>
      <div class="box-style style-right">right</div>
      <div class="box-style style-bottom">bottom</div>
      <div class="box-style style-left">left</div>
      <div class="box-style style-none">none</div>
      <div class="box-style style-hidden">hidden</div>
      <div class="box-style style-dotted">dotted</div>
      </div>
      <div class="disp">
      <div class="box-style style-dashed">dashed</div>
      <div class="box-style style-solid">solid</div>
      <div class="box-style style-double">double</div>
      <div class="box-style style-groove">groove</div>
      <div class="box-style style-ridge">ridge</div>
      <div class="box-style style-inset">inset</div>
      <div class="box-style style-outset">outset</div>
      </div>
  </body>
</html>
top
right
bottom
left
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

chromeブラウザ実行結果

chrome

Firefox ブラウザ実行結果

Firefox

edgeブラウザ実行結果

edge

operaブラウザ実行結果

opera