{border:太さ 線の種類 線の色;} でボックスを作ることができます。 線の色は記述しなくても枠線は表示されます。 ボックスは<span>タグ、<div>タグ、見出しタグ、<p>タグ 等で作れます。

■ 枠線の色の指定方法

ボックスの枠線の色の指定方法は以下の通りです。
{border-color:transparent;}でボックスの枠線の色を透明にするこ
とができます。（デフォルト）

ボックスの枠線の色を個別に指定するパターンは以下の通りです。

【ブラウザ表示】

上下左右 紫色の線

上下がnavy、左右が青色

上がアクア、左右が青、下の線が黄色

上が赤、右が青、下が黄色、左が緑色の線

上が赤、右が青、下が黄色、左が緑色の線

<p class="iro1">上下左右 紫色の線</p>
<p class="iro2">上下がnavy、左右が青色</p>
<p class="iro3">上がアクア、左右が青、下の線が黄色</p>
<p class="iro4">上が赤、右が青、下が黄色、左が緑色の線</p>
<p class="iro5">上が赤、右が青、下が黄色、左が緑色の線</p>

p.iro1{border:1px solid; border-color:purple;}
p.iro2{border:1px solid; border-color:navy blue;}
p.iro3{border:1px solid; border-color:aqua blue yellow;}
p.iro4{border:1px solid; border-color:red blue yellow green;}
p.iro5{
border:1px solid;
border-top-color:red;
border-right-color:blue;
border-bottom-color:yellow;
border-left-color:green;
}

<p style="border:1px solid; border-color:purple;">
上下左右 紫色の線
</p>
<p style="border:1px solid; border-color:navy blue;">
上下がnavy、左右が青色
</p>
<p style="border:1px solid; border-color:aqua blue yellow;">
上がアクア、左右が青、下の線が黄色
</p>
<p style="border:1px solid; border-color:red blue yellow green;">
上が赤、右が青、下が黄色、左が緑色の線
</p>
<p style="border:1px solid; border-top-color:red; border-right-color:blue; border-bottom-color:yellow; border-left-color:green;">
上が赤、右が青、下が黄色、左が緑色の線
</p>

■ その他の項目

スタイルシート一覧のページに戻る