border-bottom

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 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은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

값

<br-width>

border-bottom-width.

<br-style>

border-bottom-style.

<color>

border-bottom-color.

형식 구문

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

브라우저 호환성

BCD tables only load in the browser