border

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 단축 속성은 요소의 테두리를 설정합니다. border-width, border-style, border-color의 값을 설정합니다.

시도해보기

구성 속성

border는 단축 속성으로서 다음의 하위 속성을 포함합니다.

구문

css
/* 스타일 */
border: solid;

/* 너비 | 스타일 */
border: 2px dotted;

/* 스타일 | 색 */
border: outset #f33;

/* 너비 | 스타일 | 색 */
border: medium dashed green;

/* 전역 값 */
border: inherit;
border: initial;
border: unset;

border 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.

참고: 스타일을 지정하지 않으면 기본값인 none이 사용돼 테두리가 보이지 않습니다.

<line-width>

테두리의 굵기로 기본값은 medium입니다. border-width를 참고하세요.

<line-style>

테두리의 스타일로 기본값은 none입니다. border-style을 참고하세요.

<color>

테두리의 색상으로 기본값은 currentcolor입니다. border-color를 참고하세요.

설명

다른 단축 속성과 마찬가지로, 생략한 속성은 초깃값으로 설정됩니다. 한 가지 중요한 점은, border를 사용해서는 border-image에 원하는 값을 지정할 수는 없고 대신 초깃값인 none이 자동으로 설정됩니다.

border 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 border-width, border-style,border-color를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준(border-top 등)이나 상대 기준(border-block-start 등) 속성을 사용해서 따로 정해줄 수도 있습니다.

테두리 vs외곽선

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.

  • 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
  • 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.

형식 정의

초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter.
상속no
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

형식 구문

border = 
<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

html
<div>테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?</div>

CSS

css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

결과

명세

Specification
CSS Backgrounds and Borders Module Level 3
# propdef-border
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter.
상속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

같이 보기