書式

border-color: 値　＜全枠線色を一括指定＞
border-top-color: 値 ＜上線色を指定＞
border-right-color: 値　＜右線色を指定＞
border-bottom-color: 値　＜下線色を指定＞
border-left-color: 値　＜左線色を指定＞

枠線の色を指定します。それぞれ値には数値、ＲＧＢ値、キーワードを入れます。ここでは数値での指定で説明します。

スタイルシート部分
.boxsample1 {
width: 50%;
border-style: solid;
border-width: 10px;
background-color: #ffffcc;
border-color: #ffcc00;
}
.boxsample2 {
width: 50%;
border-style: solid;
border-width: 10px;
background-color: #ffffcc;
border-top-color: #ffcc00;
border-right-color: #0000ff;
border-bottom-color: #800080;
border-left-color: #800000;
}

boxsample1では全枠線色一括して指定し、boxsample2ではそれぞれに枠線色を指定しました。 表示

このボックス領域の枠線色は一括して指定しました。

このボックス領域の枠線色は上、右、下、左それぞれ指定しました。

記事を飾ろう！トップ
マージン、パディング基礎
背景色を指定する
背景画像を指定する
枠線幅を指定する
枠線色を指定する
枠線の種類を指定する
枠線ごとに一括指定する
幅、高さを指定する
ボックスサンプル集

次のキーワードを検索：[スタイルシート]

前後の記事

最近の記事