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プロパティ使用例
borderプロパティ使用例

外枠関連項目

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

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img