border-bottom-style

外枠の下部分に対して、線の種類を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ border-bottom-style : 値; }

▲PageTop

指定できる値

値 初期値 意味
none ○ 線のスタイルはありません。
hidden noneとほぼイコールですが、同じ罫線に別のスタイルが適用されてしまっている場合(罫線の競合)は、この値が最優先となります。
solid 実線になります。
double 二重線になります。
dashed 破線になります。
dotted 点線になります。
groove 窪みのような線になります。
ridge 隆起したような線になります。
inset 凹みに見える線になります。
outset 凸に見える線になります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border-bottom-style : none;
      }
      #sample2 {
        border-bottom-style : hidden;
      }
      #sample3 {
        border-bottom-style : solid;
      }
      #sample4 {
        border-bottom-style : double;
      }
      #sample5 {
        border-bottom-style : dashed;
      }
      #sample6 {
        border-bottom-style : dotted;
      }
      #sample7 {
        border-bottom-style : groove;
      }
      #sample8 {
        border-bottom-style : ridge;
      }
      #sample9 {
        border-bottom-style : inset;
      }
      #sample10 {
        border-bottom-style : outset;
      }
      #sample div {
        border-bottom-width : 20px;
        border-left-style : solid;
        border-right-style : solid;
        border-top-style : solid;
        float : left;
        margin-right : 10px;
        padding : 5px;
        width : 150px;
        height : 70px;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">【 none 】</div>
      <div id="sample2">【 hidden 】</div>
      <div id="sample3">【 solid 】</div>
      <div id="sample4">【 double 】</div>
      <div id="sample5">【 dashed 】</div>
      <br style="clear : left;"><br>
      <div id="sample6">【 dotted 】</div>
      <div id="sample7">【 groove】</div>
      <div id="sample8">【 ridge 】</div>
      <div id="sample9">【 inset 】</div>
      <div id="sample10">【 outset 】</div>
      <br style="clear : left;"><br>
    </div>
  </body>
</html>

表示結果

【 none 】
【 hidden 】
【 solid 】
【 double 】
【 dashed 】


【 dotted 】
【 groove】
【 ridge 】
【 inset 】
【 outset 】


▲PageTop

関連項目

CSS

border-bottom / border-bottom-color / border-bottom-width

▲PageTop

▲