border-bottom

border-bottom CSS 단축 속성은 요소의 아래쪽 테두리를 설정합니다. border-bottom-width, border-bottom-style, border-bottom-color의 값을 지정합니다.

시도해보기

다른 단축 속성과 마찬가지로, border-bottom는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

css
border-bottom-style: dotted;
border-bottom: thick green;
css
border-bottom-style: dotted;
border-bottom: none thick green;

따라서 border-bottom보다 먼저 지정한 border-bottom-style의 값은 무시됩니다. border-bottom-style의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

구문

css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed green;

border-bottom은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

형식 구문

border-bottom = 
<line-width> ||
<line-style> ||
<color>

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

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

예제

html
<div>아래쪽 테두리를 가진 요소입니다.</div>
css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

명세

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter (en-US).
상속no
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

브라우저 호환성

BCD tables only load in the browser