border

解説

4辺の線のスタイル、太さ、色をまとめて指定する際に使用します。スタイル、太さ、色のうち指定する値を任意の順にスペースで区切って記述します。このプロパティでは各辺異なる指定はできませんので注意が必要です（あくまで4辺全てを一括して指定します）。

プロパティ情報

値：border-widthの値、border-styleの値、色の中から任意の順で１つ以上。
初期値：各プロパティの初期値となりますが、省略した場合には初期値を再指定したものとみなされますので注意が必要。
適用対象：全ての要素
継承：しない
パーセンテージ：包含ブロックの横幅に対する割合
適用メディア：視覚
レベル：1〜2

参照

border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width

使用例

ソース

CSSの記述方法はスタイルシートってなに？も参照下さい。

  p.samp1 { border: solid  3px #9999ff; }
  p.samp2 { border: double 3px #9999ff; }
  p.samp3 { border: dashed 3px #9999ff; }
  p.samp4 { border: dotted 3px #9999ff; }
  p.samp5 { border: groove 3px #9999ff; }
  p.samp6 { border: ridge  3px #9999ff; }
  p.samp7 { border: inset  3px #9999ff; }
  p.samp8 { border: outset 3px #9999ff; }
  p.samp9 { border: none   3px #9999ff; }
  p.samp10{ border: hidden 3px #9999ff; }
HTMLの記述方法

<p class="samp1">solid を指定</p>
<p class="samp2">double を指定</p>
<p class="samp3">dashed を指定</p>
<p class="samp4">dotted を指定</p>
<p class="samp5">groove を指定</p>
<p class="samp6">ridge を指定</p>
<p class="samp7">inset を指定</p>
<p class="samp8">outset を指定</p>
<p class="samp9">none を指定</p>
<p class="samp10">hidden を指定</p>

表示結果

solid を指定

double を指定

dashed を指定

dotted を指定

groove を指定

ridge を指定

inset を指定

outset を指定

none を指定

hidden を指定