ボーダーのスタイル
(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:
bottom
;
C2- ie4- N6-
border-left-style:
left
;
C2- ie4- N6-
値:
[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] |
----- hint -----
a b この順序で
a|b どれか1つ
a||b 少なくとも1つ
[...] グループ
a* 0回以上
a+ 1回以上
a? 0回、1回
{a,b} a回以上b回以下
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>
none
C1- ie4- N4- ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、ほかの値が優先されます。初期値。
hidden
C2- N7- ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、この値が優先されます。
dotted
C1- ie55- N6- ボーダーを点線で表示。
dashed
C1- ie55- N6- ボーダーを破線で表示。
solid
C1- ie4- N4- ボーダーを実線で表示。
double
C1- ie4- N4- ボーダーを二重線で表示。
groove
C1- ie4- N4- ボーダーが凹んで見えるように表示。
ridge
C1- ie4- N4- ボーダーが突き出て見えるように表示。
inset
C1- ie4- N4- ボーダーの内側全体が凹んで見えるように立体的に表示します。
outset
C1- ie4- N4- ボーダーの内側全体が突き出て見えるように立体的に表示します。
ボーダーのスタイルに1つの値
ボーダーのスタイルに1つ以上の値
ボーダーのスタイル、上、右、下、左
border-style:hidden;
border-sytle:hidden;
Firefox3のサンプル画像
<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
2005/09/22発行 2009/09/01更新