ボーダーのスタイル (Border style)

 
ボックスモデル
ホーム > CSS2 Note > ボーダーのスタイル
C1- ie4- N4-

説明

border-style: top right bottom left; C1- ie4- N4-

border-top-style: top;       C2- ie4- N6-
border-right-style: right;   C2- ie4- N6-
border-bottom-style: bottomC2- ie4- N6-
border-left-style: left;     C2- ie4- N6-
値:  [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] | inherit
初期値:none適用要素:すべて継承:しない%値:なしメディア:ビジュアル
ボーダーのスタイル(実線、二重線、破線など)を指定します。簡略化プロパティ「border-style」は、四辺のボーダーのスタイルを半角スペース[ ]区切りの値で同時に指定できます。

border-colorプロパティで色が指定されていない場合、ボーダーの色は文字色(colorプロパティ)の値を参照します。また、ボーダーのスタイルの初期値は「none」なので、スタイルを指定するまでボーダーは表示されません。

border-styleのレンダリング
 
 

簡略化プロパティ「border-style」について



簡略化プロパティ「border-style」は、値が1つのとき上右下左のボーダーのスタイルに適用されます。値が2つのとき、1つ目が上下、2つ目が右左のボーダーのスタイルに適用されます。値が3つのとき、1つ目が上、2つ目が右左、3つ目が下のボーダーのスタイルに適用されます。値が4つのとき上から時計回りに上、右、下、左のボーダーのスタイルに適用されます。

すなわち、値は上から時計回りに適用され、空白の値は、反対側の値によって補われます。
値の適用
 

使用例

#tmyk {border-style:dotted double}
h1 {border-top-style:dashed; border-bottom-style:dashed}
 

ボーダーのスタイルの値 <border-style>

noneC1- ie4- N4- ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、ほかの値が優先されます。初期値。
hiddenC2- N7- ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、この値が優先されます。
dottedC1- ie55- N6- ボーダーを点線で表示。
dashedC1- ie55- N6- ボーダーを破線で表示。
solidC1- ie4- N4- ボーダーを実線で表示。
doubleC1- ie4- N4- ボーダーを二重線で表示。
grooveC1- ie4- N4- ボーダーが凹んで見えるように表示。
ridgeC1- ie4- N4- ボーダーが突き出て見えるように表示。
insetC1- ie4- N4- ボーダーの内側全体が凹んで見えるように立体的に表示します。
outsetC1- ie4- N4- ボーダーの内側全体が突き出て見えるように立体的に表示します。

ボーダーのスタイルに1つの値

 

ボーダーのスタイルに1つ以上の値

 

ボーダーのスタイル、上、右、下、左

 

border-style:hidden;

<style type="text/css"><!--
.eg1 {border-collapse:collapse;}
.eg1 th {
  border:8px solid #9cf;
  padding:6px;
}
.eg1 td {
  border:8px solid #9cf;
  padding:6px;
}
.eg1 .hdn {border-style:hidden;}
--></style>

<table class="eg1">
<tbody>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td class="hdn">データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</tbody>
</table>
ieは未対応。ff1- o3- sf1- gc1- N7-は対応しています。
 
関連項目: margin | padding | border | border-width | border-color | border-style
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新