border-bottom-color
CSS 속성은 요소의 아래쪽 테두리 색상을 지정합니다. border-color
또는 border-bottom
단축 속성으로도 지정할 수 있습니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
구문
/* <color> 값 */
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255, 0, 0);
border-bottom-color: hsla(100%, 50%, 25%, 0.75);
border-bottom-color: currentColor;
border-bottom-color: transparent;
/* 전역 값 */
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: unset;
border-bottom-color
속성은 하나의 값을 사용해 지정합니다.
값
<color>
- 아래쪽 테두리의 색상.
형식 구문
예제
테두리를 가진 간단한 상자
HTML
<div class="mybox">
<p>This is a box with a border around it.
Note which side of the box is
<span class="redtext">red</span>.</p>
</div>
CSS
.mybox {
border: solid 0.3em gold;
border-bottom-color: red;
width: auto;
}
.redtext {
color: red;
}
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom-color' in that specification. |
Candidate Recommendation | No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed. |
CSS Level 2 (Revision 1) The definition of 'border-bottom-color' in that specification. |
Recommendation | Initial definition |
초기값 | currentcolor |
---|---|
적용대상 | all elements. It also applies to ::first-letter . |
상속 | no |
Computed value | computed color |
Animation type | a color |
브라우저 호환성
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
같이 보기
- 테두리 관련 CSS 단축 속성:
border
,border-bottom
,border-color
. - 다른 방향 테두리의 색상 관련 CSS 단축 속성:
border-top-color
,border-right-color
,border-left-color
. - 아래쪽 테두리 관련 CSS 속성:
border-bottom-style
,border-bottom-width
.