border-bottom-width

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.

CSS border-bottom-width 속성은 요소의 아래 테두리 너비를 지정합니다.

시도해보기

구문

css
/* 키워드 값 */
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
계산 값the absolute length or 0 if border-bottom-style is none or hidden
Animation typea length

형식 구문

border-bottom-width = 
<line-width>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

예제

아래 테두리의 너비 비교

HTML

html
<div>Element 1</div>
<div>Element 2</div>

CSS

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
CSS Backgrounds and Borders Module Level 3
# the-border-width

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-bottom-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기