最終更新日

border-top-colorプロパティ

border-top-colorは、上側のボーダーの色を指定するプロパティです。上下左右のボーダーの色をまとめて指定する場合は、border-colorを使用します。

CSS3での変更点
・値に、RGBA値、HSL値、HSLA値、transparent、currentColorが追加されました。
初期値 適用先 継承
currentColor すべての要素 なし
説明
RGB値(16進数) R、G、Bそれぞれの割合を16進数の2桁で示します。WEBセーフカラーは1桁に省略する事も可能です。
RGB値(10進数) R、G、Bそれぞれの割合を「0~255」までの10進数の数値で示します。
RGB値(%) R、G、Bそれぞれの割合をパーセント値で示します。
RGBA値(10進数) RGB値の10進数表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0~1.0」の範囲で示します。
RGBA値(%) RGB値のパーセント表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0~1.0」の範囲で示します。
HSL値 H(色相)S(彩度)L(明度)という3つの属性を使って色を表す方法です。H(Hue:色相)は、色を環状で表す色相環の角度を示す数値で指定します。0は赤、120は緑、240は青になります。S(Saturation:彩度)は、色の鮮やかさをパーセント値で指定します。100%は彩度がもっとも高い純色で、0%は彩度のない無彩色です。L(Lightness:明度)は、色の明るさを0%~100%までのパーセント値で指定します。50%は純色を示します。
HSLA値 HSLの表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0~1.0」の範囲で示します。
基本色 CSS3で定義されている、black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aquaの16色です。アルファベットの大文字と小文字は区別されません。
拡張色 一般的なブラウザが対応している「X11カラー」の色名です。CSS3カラーモジュールでは、X11カラー140色に加え、darkgray、darkslategray、dimgray、gray、lightgrey、lightslategray、slategrayの7色については、「gray」と「grey」のどちらのスペルでも利用できるようになり、合計147色のカラーネームが正式に定義されています。
transparent 完全な透過色を示します。rgba(0,0,0,0)と指定した場合と同じです。
currentColor 要素のcolorプロパティの値を示します。色の値を受け取る全てのプロパティで使用できます。colorプロパティ自身にcurrentColorを指定した場合は「color:inherit」として扱われ、親要素のカラー値を受け継ぎます。(初期値
サンプルコード
border-top-color: #f00;
border-top-color: #ff0000;
border-top-color: rgb(255,0,0);
border-top-color: rgb(100%,0%,0%);
border-top-color: rgba(255,0,0,0.5);
border-top-color: rgba(100%,0%,0%,0.5);
border-top-color: hsl(0,255%,128%);
border-top-color: hsla(0,255%,128%,0.5);
border-top-color: red;
border-top-color: darkred;
border-top-color: transparent;
border-top-color: currentColor;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME