CSS: 境界枠 (border)

枠線の幅

border-top-width: thin | medium | thick | <length>;

border-right-width: thin | medium | thick | <length>;

border-bottom-width: thin | medium | thick | <length>;

border-left-width: thin | medium | thick | <length>;

 または

border-width: thin | medium | thick | <length>;

枠線の色

border-color: <color>;

枠線の種類

border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset;

位置による指定

border-top: <border-top-width> || <border-style> || <color>;

border-right: <border-right-width> || <border-style> || <color>;

border-bottom: <border-bottom-width> || <border-style> || <color>;

border-left: <border-left-width> || <border-style> || <color>;

枠線の種類

none

境界は描かれません('border-width'値にかまわず)。

dotted

境界は要素の背景の上に引かれた点線です。

dashed

境界は要素の背景の上に引かれた破線です。

solid

境界は実線です。

double

境界は要素の背景の上に引かれた二重の線です。 ２本の単独線の合計と２つの間の間隔は、<border-width> と等しくなります。

groove

3Dの溝(groove)は、<color> の値に基づいた色で描かれます。

ridge

3Dの隆起線(ridge)は、<color> の値に基づいた色で描かれます。

inset

3Dのはめ込み(inset)は、<color> の値に基づいた色で描かれます。

outset

3Dの押出し(outset)は、<color> の値に基づいた色で描かれます。

例