枠線を設定する(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(右)で設定する。
枠線の太さ、枠線の種類、枠線の色の順で設定する。

スタイルシート講座

初心者講座

ホームページ作成講座

HTML講座

スタイルシート講座

スポンサードリンク

スタイルシート辞典

テキスト
フォント
背景
ボックス
配置
リスト
テーブル
ユーザインタフェース
その他