border

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

다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정됩니다. 한 가지 중요한 점은, border-imageborder로 직접 설정할 수 없으며 대신 초기값, 즉 none을 할당합니다.

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

테두리 vs외곽선

borderoutline은 매우 비슷하지만몇 가지 면에서는다릅니다.

  • 외곽선은 요소 콘텐츠 밖에 그려지며 별도로 공간을 차지하지 않습니다.
  • 명세에 따르면외곽선의 형태는, 대부분 직사각형이긴 하지만, 다른 형태일 수도 있습니다.

구문

/* 스타일 */
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를 참고하세요.

형식 구문

<line-width> || <line-style> || <color>

where
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

예제

HTML

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

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 Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border' in that specification.
Candidate Recommendation Removes specific support for transparent, as it is now a valid <color>; this has no practical impact.
Though it cannot be set to a custom value using the shorthand, border now resets border-image to its initial value (none).
CSS Level 2 (Revision 1)
The definition of 'border' in that specification.
Recommendation Accepts the inherit keyword. Also accepts transparent as a valid color.
CSS Level 1
The definition of 'border' in that specification.
Recommendation Initial definition.
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter.
상속no
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
borderChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown