Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- border-color
border-color
境界線の色に関する項目をまとめて指定できます。
指定する値の個数で上下左右をそれぞれ異なる色にすることができます。値の区切りは半角スペースを使用します。
- 値が1つの場合、上下左右の境界線に同じ値が適用されます。
- 値が2つの場合、1つ目は上下の、2つ目は左右の境界線に値が適用されます。
- 値が3つの場合、1つ目は上、2つ目は左右、3つ目は下の境界線に適用されます。
- 値が4つの場合、それぞれ上、右、下、左(上から時計回り)の境界線に適用されます。
サンプルコード
/* 『上下左右』を指定しています。 */ div.test { border-color: red;} /* 『上下』『左右』を指定しています。 */ div.test1 { border-color: red #ff0;} /* 『上』『左右』『下』を指定しています。 */ div.test2 { border-color: red #ff0 #00f;} /* 『上』『下』『左』『右』を指定しています。 */ div.test3 { border-color: red #ff0 #00f black;}
指定可能な値一覧
値 | 概要 |
---|---|
transparent | 境界線を透明色に指定します。 |
カラーコード、もしくはカラーネーム | 境界線を指定した色へ変更します。『border-color』に関する項目が指定されていない場合は『color』プロパティに指定されている色が初期値となります。 |
ブラウザでの表示結果
※ 以下のサンプルの『border-style』プロパティは『solid』を指定しています。
<div style="border-color: red; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-color: red #ff0; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-color: red #ff0 #00f; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-color: red #ff0 #00f black; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
対応ブラウザ
IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
---|---|---|---|---|---|---|---|---|---|
iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
---|---|---|
概要
境界線の色に関する項目をまとめて指定できます。
『border-color』プロパティに何も指定していない場合は『color』プロパティに設定されている色が初期値となります。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。