CSS3

プロパティ

border-style

→●、mdn

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

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

border-style プロパティは、次に挙げるプロパティを単独の宣言で設定する略式プロパティである：

一連の成分値は、これら各側の下位プロパティを時計回り（top、right、bottom、left）に設定する。

<line-style>

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

none

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

開始<SPAN style="
 border-width:10px;
 border-style:none;
 border-color:#bbb;
">テスト</SPAN>終了

hidden

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

開始<SPAN style="
 border-width:10px;
 border-style:hidden;
 border-color:#bbb;
">テスト</SPAN>終了

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

dotted

点線 ─ 小丸の並び。

開始<SPAN style="
 border-width:10px;
 border-style:dotted;
 border-color:#bbb;
">テスト</SPAN>終了

開始<DIV style="
 border-width:10px;
 border-style:dotted;
 border-color:#bbb;
">テスト</DIV>終了

dashed

端が角ばった破線。

開始<SPAN style="
 border-width:10px;
 border-style:dashed;
 border-color:#bbb;
">テスト</SPAN>終了

solid

一重の実線。

開始<SPAN style="
 border-width:10px;
 border-style:solid;
 border-color:#bbb;
">テスト</SPAN>終了

double

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

開始<SPAN style="
 border-width:10px;
 border-style:double;
 border-color:#bbb;
">テスト</SPAN>終了

groove

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

開始<SPAN style="
 border-width:10px;
 border-style:groove;
 border-color:#bbb;
">テスト</SPAN>終了

ridge

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

開始<SPAN style="
 border-width:10px;
 border-style:ridge;
 border-color:#bbb;
">テスト</SPAN>終了

inset

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

開始<SPAN style="
 border-width:10px;
 border-style:inset;
 border-color:#bbb;
">テスト</SPAN>終了

outset

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

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

開始<SPAN style="
 border-width:10px;
 border-style:outset;
 border-color:#bbb;
">テスト</SPAN>終了

関連

border-color、border-width。border。

テスト