border-bottom-width

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

ブラウザ

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

書式

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

▲PageTop

指定できる値

値	初期値	意味
数値+単位		太さを指定します。単位例：px,em,ex
thin		細い線になります。
medium	○	thinより太く、thickより細い線になります。
thick		太い線になります。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border-bottom-width : 20px;
      }
      #sample2 {
        border-bottom-width : thin;
      }
      #sample3 {
        border-bottom-width : medium;
      }
      #sample4 {
        border-bottom-width : thick;
      }
      #sample div {
        border-style : solid;
        border-bottom-color : red;
        padding : 5px;
        width : 50%;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">【 border-bottom-width : 20px 】</div>
      <br>
      <div id="sample2">【 border-bottom-width : thin 】</div>
      <br>
      <div id="sample3">【 border-bottom-width : medium 】</div>
      <br>
      <div id="sample4">【 border-bottom-width : thick 】</div>
    </div>
  </body>
</html>

表示結果

【 border-bottom-width : 20px 】

【 border-bottom-width : thin 】

【 border-bottom-width : medium 】

【 border-bottom-width : thick 】

▲PageTop

border-bottom-width

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS