border-bottom-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
border-bottom-color
は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの border-color
または border-bottom
でも設定することができます。
試してみましょう
構文
css
/* <color> 値 */
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255 0 0);
border-bottom-color: hsl(100deg 50% 25% / 75%);
border-bottom-color: currentcolor;
border-bottom-color: transparent;
/* グローバル値 */
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: revert;
border-bottom-color: revert-layer;
border-bottom-color: unset;
border-bottom-color
プロパティは 1 つの値で指定します。
値
<color>
-
下の境界線の色を定義します。
公式定義
初期値 | currentcolor |
---|---|
適用対象 | すべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 色の計算値 |
アニメーションの種類 | 色 |
形式文法
例
境界線が付いた単純な div
HTML
html
<div class="mybox">
<p>
これは周囲に境界線があるボックスです。 なお、ボックスのその辺が<span class="redtext">赤</span>になっています。
</p>
</div>
CSS
css
.mybox {
border: solid 0.3em gold;
border-bottom-color: red;
width: auto;
}
.redtext {
color: red;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-color |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 境界に関する CSS 一括指定プロパティ:
border
,border-bottom
,border-color
. - 他の境界線の色に関する CSS プロパティ:
border-right-color
,border-top-color
,border-left-color
- 同じ境界線に適用される他の境界関連の CSS プロパティ:
border-bottom-style
,border-bottom-width
- 既定値の
currentcolor
カラー値