トップページ > ボーダー指定見本

ボーダー指定見本

ボーダーの太さと形式

太さ1px、黒色(#000000)のボックスの「border-style」見本。

border: 1px solid #000000;

border: 1px dashed #000000;

border: 1px dotted #000000;

border: 1px double #000000;


太さ3px、黒色(#000000)のボックスの「border-style」見本。

border: 1px solid #000000;

border: 3px dashed #000000;

border: 3px dotted #000000;

border: 3px double #000000; (doubleの効果は線幅3px以上で出る)

border: 3p groov #000000;

border: 3px inse #000000;

border: 3px outse #000000;

border: 3px ridge #000000;


太さ3px、ピンク(#FF99FF)のボックスの「border-style」見本。

border: 1px solid #FF99FF;

border: 3px dashed #FF99FF;

border: 3px dotted #FF99FF;

border: 3px double #FF99FF;

border: 3px groove #FF99FF;

border: 3px inset #FF99FF;

border: 3px outset #FF99FF;

border: 3px ridge #FF99FF;


太さ5px、ピンク(#FF99FF)のボックスの「border-style」見本。

border: 5px solid #FF99FF;

border: 5px dashed #FF99FF;

border: 5px dotted #FF99FF;

border: 5px double #FF99FF;

border: 5px groove #FF99FF;

border: 5px inset #FF99FF;

border: 5px outset #FF99FF;

border: 5px ridge #FF99FF;


太さ7px、ピンク(#FF99FF)のボックスの「border-style」見本。

border: 7px solid #FF99FF;

border: 7px dashed #FF99FF;

border: 7px dotted #FF99FF;

border: 7px double #FF99FF;

border: 7px groove #FF99FF;;

border: 7px inset #FF99FF;

border: 7px outset #FF99FF;

border: 7px ridge #FF99FF;

ボーダー色で立体的なボックスを作る

ボーダーのスタイルは「solid」と「double」以外は、ブラウザによって表示が変わる。特に、線に立体感を出す形式(inset, outset, ridge, groove)は、ブラウザごとに違いが大きい。ボタンなどで立体感のあるボックスが必要な場合は、線をsolid(実線)にして、線の上下左右の色を変えて作った方が良い。

BUTTON

BUTTON

BUTTON

↑一番左のボックスの指定は、下記の通り。他のボックスもそれぞれ上下左右の色指定を変えたもの。
/* 上の1番左のBUTTONのCSS *
border-top: 5px solid #5FE576;
border-right: 5px solid #009900;
border-bottom: 5px solid #006600;
border-left: 5px solid #00CC33;
background: #B5F2B4;
width: 80px;
font-weight: bold;
color: #006600;