トップページの中の プロパティの中の Bのプロパティ一覧の中の border

border

  • 最終更新:2009年11月29日 01:08

borderプロパティは、上下左右のボーダーの幅(border-width)、種類(border-style)、色(border-color)を一括で指定できます。
各値は、任意の順番で半角スペースなどの空白類文字で区切って書き、指定をしなかった値に関しては初期値にリセットされます。尚、種類(border-style)は省略してしまうと、初期値がnoneになっているため、ボーダーが表示されないので注意が必要です。

borderプロパティだと4辺全てが同じ指定になるため、各辺を個別に指定したい場合は、border-topプロパティなど個別のプロパティを用いて指定します。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

[<border-width>||<border-style>||<border-top-color>]|inherit
初期値
個別のプロパティを参照します
適用される要素
全ての要素
継承
しません
パーセント値
N/A
メディア
visual

borderのサンプル

p {
  margin: 10px;
  padding: 8px 10px;
  background: #f3f2eb;
}

p.sample01 {
  border: 5px double #666;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

サンプルです。
4辺全てが同じ幅、種類、色になっているのが確認できます。

このページの上部へ