border-bottom

外枠の下部分に対して、線の「太さ・種類・色」を指定します。

ブラウザ

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

書式

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

▲PageTop

指定できる値

値	初期値	意味
inherit		親要素の値を継承します。

・線の太さに関する指定(詳細：border-bottom-width)
値	初期値	意味
数値+単位		太さを指定します。単位例：px,em,ex
thin		細い線になります。
medium	○	thinより太く、thickより細い線になります。
thick		太い線になります。

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

・線の色に関する指定(詳細：border-bottom-color)
値	初期値	意味
16進数表記・色名		指定したカラーコード・色名が線の色になります。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border-bottom : solid thick red;
        border-top : solid 1px #000000;
        border-left : solid 1px #000000;
        border-right : solid 1px #000000;
        padding : 5px;
        width : 50%;
      }
    </style>
  </head>
  <body>
    <div id="sample1">border-bottomサンプル</div>
  </body>
</html>

表示結果

border-bottomサンプル

▲PageTop

border-bottom

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS