CSS

Cascading Style Sheets border-top-style property.

border-top-style

 border-top-styleプロパティは、上側のボーダーのスタイル(形状)を指定する際に使用します。上下左右のボーダーのスタイルをまとめて指定する際には、border-style を使用してください。

 ボックスに背景が適用されている状態で、ボーダーの領域全体を塗りつぶさない値(double, dotted, dashed)を指定すると、背景が見えるようになります。

書式
border-top-style: 値
適用対象
すべての要素
::fiest-letterにも適用されます。
初期値
none
値の継承
しない
指定できる値
solid
1本の実線で表示されます。
double
二重線で表示されます。
dotted
点線で表示されます。
dashed
破線で表示されます。
inset
ボーダーに囲まれた範囲全体が凹んで見えるように、上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset
ボーダーに囲まれた範囲全体が飛び出て見えるように、上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。上下左右の一部だけに指定しても立体感は出ません。
groove
ボーダー部分が立体的に凹んだ線に見えるように表示されます。
ridge
ボーダー部分が立体的に飛び出た線に見えるように表示されます。
hidden
ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルを構成する枠線の種類が競合する場合は、この値が優先されます。
none 【初期値】
ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルを構成する枠線の種類が競合する場合は、他の値が優先されます。

使用例

solid

double

dotted

dashed

inset

outset

groove

ridge

hidden

none

CSS source


.c1 {border-top-style:solid;}
.c2 {border-top-style:double;}
.c3 {border-top-style:dotted;}
.c4 {border-top-style:dashed;}
.c5 {border-top-style:inset;}
.c6 {border-top-style:outset;}
.c7 {border-top-style:groove;}
.c8 {border-top-style:ridge;}
.c9 {border-top-style:hidden;}
.c10 {border-top-style:none;}

HTML source


<p class="c1">solid</p>
<p class="c2">double</p>
<p class="c3">dotted</p>
<p class="c4">dashed</p>
<p class="c5">inset</p>
<p class="c6">outset</p>
<p class="c7">groove</p>
<p class="c8">ridge</p>
<p class="c9">hidden</p>
<p class="c10">none</p>