このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-color”プロパティ:境界線の色

記事Dec. 4th,2020
境界線の色を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-top-color: currentColor;
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

border-color”プロパティは要素の境界線の色を指定する以下のプロパティの一括指定プロパティです。

サンプルコード

div { border-color: rgb(204,153,204);}

値の指定方法

値が1つの場合は4つすべての辺の境界線の色となります。

div { border-color: 〚境界線の色〛;}

また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する辺が変わります。

  • 2つの場合は1つ目の値が上下、2つ目の値が左右の辺に適用されます。
  • 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の辺に適用されます。
  • 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の辺に適用されます。
border-color: 〚すべての辺〛;
border-color: 〚上下〛 〚左右〛;
border-color: 〚上〛 〚左右〛 〚下〛;
border-color: 〚上〛 〚右〛 〚下〛 〚左〛;

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-color
定義あり

定義あり

定義あり

使用例

境界線の色を指定する

div {
border-style: solid;
border-width: 5px;
border-color: rgb(204,153,204);
}
border-color: rgb(204,153,204);
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク