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

 

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

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

테두리 vs 외곽선

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

  • 외곽선은 요소 콘텐츠 밖에 그려지며 별도로 공간을 차지하지 않습니다.
  • 명세에 따르면 외곽선의 형태가, 보통 직사각형이긴 하지만 꼭 그렇지 않아도 됩니다.

구문

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

border 속성은 아래 나열한 값 중 한 개에서 세 개를 사용해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.

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

<line-width>
테두리의 굵기. 기본값 mediumborder-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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: urty5656
최종 변경자: urty5656,