仙台ホームページ制作

• border-style：罫線の種類を指定する
• border-width：罫線の太さを指定する
• border-color：罫線の色を指定する
• border：罫線の設定をまとめて指定する

罫線の種類を指定します。

指定する方法は、上下左右を個別に指定する方法と、まとめて指定する方法があります。

個別に指定する方法

まとめて指定する方法

指定できる種類を下記の表に示します。

下記サンプルでは、３種類のボーダーを表示しています。

<div class="tag_bd1">ボーダー１</div>
<div class="tag_bd2">ボーダー２</div>
<div class="tag_bd3">ボーダー３</div>

.tag_bd1{

	border: 4px dotted red;
	padding:1px;
	line-height:200%;
	margin-bottom: 5px;
}
.tag_bd2{

	border: 4px groove red;
	padding:1px;
	line-height:200%;
	margin-bottom: 5px;
}
.tag_bd_bd1{
	border-top-style:solid;
	border-left-style:outset;
	
	padding:1px;
	line-height:200%;
	margin-bottom: 5px;
}

罫線の太さを指定します。

指定する方法は、上下左右を個別に指定する方法と、まとめて指定する方法があります。

個別に指定する方法

まとめて指定する方法

指定できる種類を下記の表に示します。

下記サンプルでは、上下左右に１０ｐｘの余白を与えています。水色の部分が余白の部分です。

罫線の太さを指定します。

指定する方法は、上下左右を個別に指定する方法と、まとめて指定する方法があります。

個別に指定する方法

まとめて指定する方法

指定できる種類を下記の表に示します。

下記サンプルでは、上下左右に１０ｐｘの余白を与えています。水色の部分が余白の部分です。

罫線のカラーを指定します。

指定する方法は、上下左右を個別に指定する方法と、まとめて指定する方法があります。

個別に指定する方法

まとめて指定する方法

指定できる種類を下記の表に示します。

上下左右の罫線のデザインをまとめて指定します。

指定する方法は、上下左右を個別に指定する方法と、まとめて指定する方法があります。

個別に指定する方法

まとめて指定する方法

下記サンプルでは、borderで罫線を指定しています。

test1
<div id="border_sample">ボーダーサンプル</div>
test2

#border_sample{
	border:solid 10px orange;
}          
          

Box

Border

List

Text