CSS border-bottom-width
속성은 요소의 아래 테두리 너비를 지정합니다.
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.
구문
/* 키워드 값 */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> 값 */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* 전역 값 */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;
값
<line-width>
- 테두리의 너비입니다. 0 이상의
<length>
또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.thin
얇은 테두리 medium
중간 테두리 thick
굵은 테두리 참고: 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나
thin ≤ medium ≤ thick
이고, 하나의 문서 내에서 동일합니다.
형식 정의
초기값 | medium |
---|---|
적용대상 | all elements. It also applies to ::first-letter . |
상속 | no |
Computed value | the absolute length or 0 if border-bottom-style is none or hidden |
Animation type | a length |
형식 구문
예제
아래 테두리의 너비 비교
HTML
<div>Element 1</div>
<div>Element 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom-width' in that specification. |
Candidate Recommendation | No significant change. |
CSS Level 2 (Revision 1) The definition of 'border-bottom-width' in that specification. |
Recommendation | No significant change. |
CSS Level 1 The definition of 'border-bottom-width' in that specification. |
Recommendation | Initial definition. |
브라우저 호환성
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-left-width
,border-right-width
,border-top-width
, andborder-width
. - 아래 테두리 관련 CSS 속성:
border
,border-bottom
,border-bottom-style
, andborder-bottom-color
.