border

ボーダー(外枠の線)に関連するプロパティ(太さ・種類・色)をまとめて指定します。


ブラウザ

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

▲PageTop

書式

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

▲PageTop

指定できる値

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

・border-widthプロパティの指定(太さの指定)
値 初期値 意味
数値+単位 太さを指定します。単位例：px,em,ex,%
thin 細い線になります。
medium thinより太く、thickより細い線になります。
thick 太い線になります。

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

・border-colorプロパティの指定(色の指定)
値 初期値 意味
16進数表記・色名 指定したカラーコード・色名が線の色になります。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border : solid medium #cccccc;
      }
      #sample2 {
        border : groove medium #999999;
      }
      #sample3 {
        border : inset medium #333333;
      }
      #sample div {
        width : 50%;
        height : 50px;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">【border : solid medium #cccccc】</div>
      <br>
      <div id="sample2">【border : groove medium #999999】</div>
      <br>
      <div id="sample3">【border : inset medium #333333】</div>
    </div>
  </body>
</html>

表示結果

【border : solid medium #cccccc】

【border : groove medium #999999】

【border : inset medium #333333】

▲PageTop

関連項目

CSS

border-color / border-style / border-width

▲PageTop

▲