ボーダー指定について

見出しに下線を引いてみたりtableのアウトラインにしてみたりと、何かと使う機会の多いborder要素。
色や幅、種類など、かなり自由に指定することが出来ます。
border-style: ボーダーの種類を指定
border-color: ボーダーの色を指定
border-width: ボーダーの太さを指定
上記に指定する値は、一つだと上下左右。二つだと上下・左右
三つだと上・左右・下。四つだと上・右・下・左となります。
【例】
border-style: dashed double dotted solid;
border-color: #0000ff #ff0000 #ffff00 #ff00ff;
border-width: 7px 3px 5px 10px;
こういう混沌とした指定をすると、
こんな混沌としたボックスが作れる、と。

ボーダー装飾一覧

border-styleの一覧です。
見やすいように、幅は8px 色は#808080 で統一しています。
solid以外は、ブラウザによって結構見え方が違うので、指定するときは注意が必要です。
ちなみに、border-widthを0にしたり、border-styleにhiddenやnoneを指定すると、ボーダーが表示されなくなります。
solid
inset
outset
ridge
double
groove
dashed
dotted
inserted by FC2 system