外枠(ボーダー)の色を指定する

border-color

CSSの書き方

border-color:カラー カラー …;

CSSの詳細情報
プロパティ名 border-color 対応ブラウザ Windows MAC
読み方 ボーダーカラー IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0
意味 外枠の色 CSSレベル CSSレベル1
設定値 カラーコード 対象 すべて要素
デフォルト colorプロパティの標準色 継承 しない

解説

ボックスの外枠(境界線)は、色をまとめて指定することもできます。

ボーダーカラープロパティに対する値はその数によって、指定できる上下左右の方向が以下の表のようになります。

記入する値の数 対象の方向
1つ 四方向(上/下/左/右)同じ
2つ 鉛直と水平方向(上下/左右の順)
3つ 上/左右/下の順
4つ 右回り方向(上/右/下/左の順)

色の指定方法

スタイルシートでの色の指定方法については以下をご覧ください。

CSS/HTMLサンプル

div { border:3px solid; border-color:#00ff00 #ff0000 #0000ff #000000; }

DIV要素の外枠の太さを3ピクセルの実線、色は緑、赤、青、黒を指定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!