CSSborder -bottom-colorプロパティ
例
下の境界線の色を設定します。
div {border-bottom-color: coral;}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このborder-bottom-color
プロパティは、要素の下枠の色を設定します。
注:プロパティの前に、常にborder-styleまたは
border-bottom-styleプロパティを宣言してくださいborder-bottom-color
。色を変更する前に、要素に境界線が必要です。
デフォルト値: | 要素の現在の色 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS1 |
JavaScript構文: | オブジェクト.style.borderBottomColor = "blue" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
border-bottom-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS構文
border-bottom-color: color|transparent|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
color | Specifies the color of the bottom border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element | |
transparent | Specifies that the border color should be transparent | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
下の境界線の色をHEX値で設定します。
div {border-bottom-color: #92a8d1;}
例
RGB値で下の境界線の色を設定します。
div {border-bottom-color: rgb(201, 76, 76);}
例
RGBA値で下の境界線の色を設定します。
div {border-bottom-color: rgba(201, 76, 76, 0.3);}
例
下の境界線の色をHSL値で設定します。
div {border-bottom-color: hsl(89, 43%, 51%);}
例
HSLA値を使用して下の境界線の色を設定します。
div {border-bottom-color: hsla(89, 43%, 51%, 0.3);}
例
透明な下の境界線を設定します。
div {border-bottom-color: transparent;}
関連ページ
CSSチュートリアル:CSS Border
CSSリファレンス:border-bottomプロパティ
HTML DOMリファレンス: borderBottomColorプロパティ