CSS3

プロパティ

border-top-style、border-right-style、border-bottom-style、border-left-style

→●、mdn（border-top-style、border-right-style、border-bottom-style、border-left-style）

ボーダー（枠線）のパターン。

これらのプロパティは、ボーダーが現れるかどうか、および、現れる（かつ、ボーダー画像で上書きされない）ときは、どのスタイルで描かれるかを制御する。

<line-style>

＝none
| hidden
| dotted
| dashed
| solid
| double
| groove
| ridge
| inset
| outset

none

ボーダーは、なし。線色と線幅は無視される（すなわち，ボーダーの線幅は 0）。これにより、border-image-width の初期値も、0 に解決されるようになることに注意。

開始<SPAN style="
 border-width:10px;
 border-top-style:none;
 border-color:#bbb;
">サンプル</SPAN>終了

<TABLE style="border-collapse:collapse;
 border-width:10px;
 border-top-style:none;
 border-color:#bbb;
"><TR>
 <TD style="border:1px solid black">テスト
 <TD style="border:1px solid black">テスト
</TABLE>

hidden

none と同じ ─ ただし、border-collapse が collapse にされた table [CSS2] に対しては、ボーダーの競合解決の規則におけるふるまいが異なる。

開始<SPAN style="
 border-width:10px;
 border-top-style:hidden;
 border-color:#bbb;
">サンプル</SPAN>終了

<TABLE style="border-collapse:collapse;
 border-width:10px;
 border-top-style:hidden;
 border-color:#bbb;
"><TR>
 <TD style="border:1px solid black">テスト
 <TD style="border:1px solid black">テスト
</TABLE>

topが消えた

dotted

点線 ─ 小丸の並び。

→botder-style

dashed

端が角ばった破線。

→botder-style

solid

一重の実線。

→botder-style

double

二重線。個々の線の太さは指定されないが、全体的な太さは、border-width に等しくなるものとする。

→botder-style

groove

キャンバスに彫られているような見かけ（この効果は、概して、border-color より少し明るい線と暗い線で“影”を形成して得られる）。

→botder-style

ridge

キャンバスに盛り上げられているかのような見かけ。

→botder-style

inset

ボーダーの内部がキャンバスから凹んでいるかのような見かけ。ボーダーの縮約モデル [CSS2] においては ridge として扱われる。

→botder-style

outset

ボーダーの内部がキャンバスから盛り上がっているかのような見かけ。ボーダーの縮約モデル [CSS2] においては groove として扱われる。

ボーダーは、要素の背景の手前に描かれるが、（重なり合う所では）要素の内容の背後に描かれる。

→botder-style

テスト