border-top-style

border-top-style

上辺の罫線の線種を指定するプロパティ。

border-styleは4辺の罫線のスタイルを一括で指定するのに対し、border-top-styleは4辺のうちの上辺のみに指定が反映される。（他の1辺のみ指定する場合は、border-bottom-style（下）、border-right-style（右）、border-left-style（左）を利用する。）

実線、点線、破線、二重線などの値があり、太さを指定するborder-top-widthと一緒に指定することで、様々な表現ができる。

値

border-styleの解説ページ参照

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

.sampleA {
	border-top-style:solid;
	border-top-width:5px;
	border-top-color:#ff9900;
}

<p class="sampleA">テキストテキスト</p>

.sampleA { border-top:solid 5px #ff9900; }

.sampleB {
	border-top-style:double;
	border-top-width:3px;
	border-top-color:#0000ff;
}

<p class="sampleB">テキストテキスト</p>

.sampleB { border-top:double 3px #0000ff; }

.sampleC {
	border-top-style:dotted;
	border-top-width:2px;
	border-top-color:#009900;
}

<p class="sampleC">テキストテキスト</p>

.sampleC { border-top:dotted 2px #009900; }