枠線を設定する(1)

borderで枠線を設定することができます。

枠線の太さ、枠線の種類、枠線の色の順で設定します。

枠線の種類には、none(線なし)、solid(実線)、double(二重線)、dashed(点線)、dotted(破線)、groove(へこんだ線)、
ridge(浮き上がった線)、inset(内側がへこんだ線)、outset(内側が浮き上がった線)が設定できます。

■スタイルシートの単位
■色を指定する方法

例

<div style="border:5px none orange">noneの設定</div></br>
<div style="border:5px solid orange">solidの設定</div></br>
<div style="border:5px double orange">doubleの設定</div></br>
<div style="border:5px dashed orange">dashedの設定</div></br>
<div style="border:5px dotted orange">dottedの設定</div></br>
<div style="border:5px groove orange">grooveの設定</div></br>
<div style="border:5px ridge orange">ridgeの設定</div></br>
<div style="border:5px inset orange">insetの設定</div></br>
<div style="border:5px outset orange">outsetの設定</div></br>

結果

noneの設定

solidの設定

doubleの設定

dashedの設定

dottedの設定

grooveの設定

ridgeの設定

insetの設定

outsetの設定

まとめ

枠線はborderで設定する。
枠線の太さ、枠線の種類、枠線の色の順で設定する。

枠線を設定する(1)

例

結果

まとめ

関連リンク