border 【外枠の指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

borderプロパティは、要素の周囲に枠線を付ける際に使用します。太さ、種類、色をそれぞれ指定出来ます。

ボーダーを使用する際にはブラウザの特徴を覚えておいた方が良いでしょう。
→ 余白と外枠の解釈の違い

borderの使用例

CSSファイル

.sample001 {
width: 200px;
height: 80px;
border: 1px solid #0066ff;
margin: 5px;
}
.sample002 {
width: 200px;
height: 80px;
border-top: 10px double #ff0000;
border-right: 5px double #00ff00;
border-bottom: 10px double #000000;
border-left: 5px double #0000ff;
margin: 5px;
}
.sample003 {
width: 200px;
height: 80px;
border: 10px outset #666666;
margin: 5px;
}

HTMLソース

<div class="sample001">
borderプロパティ使用例<br />
</div>

<div class="sample002">
borderプロパティ使用例<br />
</div>

<div class="sample003">
borderプロパティ使用例<br />
</div>

表示すると

borderプロパティ使用例

外枠関連項目

border(top right bottom left)	ボーダーの太さ・スタイル・色を指定
border-color	ボーダーの色を指定する
border-style	ボーダーのスタイルを指定する
border-width	ボーダーの太さを指定する

戻る

TOP

WEB SEARCH

CONTENTS