枠線を設定する(2)

border-top(上)、border-bottom(下)、border-left(左)、border-right(右)で上下左右の枠線を設定することができます。

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

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

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

例

<div style="border-top:5px solid orange">border-topの設定</div></br>
<div style="border-bottom:5px solid orange">border-bottomの設定</div></br>
<div style="border-left:5px solid orange">border-leftの設定</div></br>
<div style="border-right:5px solid orange">border-rightの設定</div></br>

結果

border-topの設定

border-bottomの設定

border-leftの設定

border-rightの設定

まとめ

上下左右の枠線はborder-top(上)、border-bottom(下)、border-left(左)、border-right(右)で設定する。
枠線の太さ、枠線の種類、枠線の色の順で設定する。

枠線を設定する(2)

例

結果

まとめ

関連リンク