이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

border-radius CSS 속성은 요소의 테두리를 둥글게 만듭니다. 하나의 값을 사용해 원형 모서리를, 두 개의 값을 사용해 타원형 모서리를 적용할 수 있습니다.

border-radius는 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius의 단축 속성입니다.

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse.

참고: 단축 속성을 사용할 경우에는, 각각 속성에서 상속된 값, 즉, border-radius:0 0 inherit inherit 와 같이 부분적으로 재정의(override)된 값을 사용할 수가 없다. 이러한 경우에는 표준속성(longhand)을 사용해야 한다.

구문

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

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

radius all-corner.png 외곽선(border)의 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 1개 값만을 설정하는 문법에서만 사용된다.
top-left-and-bottom-right top-left-bottom-right.png 엘리먼트(element) 외곽선(border)의 top-left와 bottom-right 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 2개 값만을 설정하는 문법에서만 사용된다.
top-right-and-bottom-left top-right-bottom-left.png 엘리먼트(element) 외곽선(border)의 top-right 와 bottom-left 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 2~3개의 값을 설정하는 문법에서만 사용된다.
top-left top-left.png 엘리먼트(element) 외곽선(border)의 top-left 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 3~4개의 값을 설정하는 문법에서만 사용된다.
top-right top-right.png 엘리먼트(element) 외곽선(border)의 top-right 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 3~4개의 값을 설정하는 문법에서만 사용된다.
bottom-right bottom-rigth.png 엘리먼트(element) 외곽선(border)의 bottom-right 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 3~4개의 값을 설정하는 문법에서만 사용된다.
bottom-left bottom-left.png 엘리먼트(element) 외곽선(border)의 bottom-left 모서리 부분에 설정될 반지름(radius)을 나타내는 <length> 또는 <percentage> 타입의 값. 3~4의 값을 설정하는 문법에서만 사용된다.
<length>
원의 반지름(radius) 또는 타원의 장반경(semi-major), 단반경(semi-minor) 축의 크기를 나타낸다. CSS의 <length> 타입으로 허용가능한 어떤 단위로도 지정이 가능하다. 음수는 지정이 불가능하다.
<percentage>
원의 반지름(radius) 또는 타원의 장반경(semi-major), 단반경(semi-minor) 축의 크기를 %(percentage)값으로 나타낸다. 가로축의 %값은 영역의 넓이(width) 값에 대응되고 세로축의 %값은 영역의 높이(height) 값에 대응된다. 음수는 사용 불가능하다.

예제:

border-radius: 1em/5em;

/* 다음과 동일 */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;

/* 다음과 동일 */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

형식 구문

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

where
<length-percentage> = <length> | <percentage>

예제

  border: solid 10px;
  /* 외곽선(border)이 'D'형태가 된다. */  
  border-radius: 10px 40px 40px 10px;
  border: groove 1em red;  
  border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em; 
  border: none;
  border-radius: 40px 10px;  
  border: none;
  border-radius: 50%; 

라이브 샘플

  1. http://jsfiddle.net/Tripad/qnGKj/2/
  2. http://jsfiddle.net/Tripad/qnGKj/3/
  3. http://jsfiddle.net/Tripad/qnGKj/4/
  4. http://jsfiddle.net/Tripad/qnGKj/5/
  5. http://jsfiddle.net/Tripad/qnGKj/6/

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-radius' in that specification.
Candidate Recommendation  

초기값as each of the properties of the shorthand:
적용대상all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
상속no
Percentagesrefer to the corresponding dimension of the border box
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 4
Notes
Full support 4
Notes
Notes Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 4
Notes
Full support 4
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Notes To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.
No support 1 — 12
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 9Opera Full support 10.5
Notes
Full support 10.5
Notes
Notes In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.
Safari Full support 5
Notes
Full support 5
Notes
Notes Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 2
Prefixed
Full support 2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support YesEdge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android Full support Safari iOS Full support YesSamsung Internet Android Full support Yes
Elliptical bordersChrome Full support Yes
Notes
Full support Yes
Notes
Notes Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
Edge Full support 12Firefox Full support 3.5IE Full support YesOpera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android Full support Yes
4 values for 4 cornersChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support 5WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android Full support Yes
PercentagesChrome Full support Yes
Notes
Full support Yes
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Edge Full support 12Firefox Full support 4
Notes
Full support 4
Notes
Notes <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.
IE Full support YesOpera Full support 11.5
Notes
Full support 11.5
Notes
Notes The implementation of <percentage> values was buggy in Opera prior to 11.50.
Safari Full support 5.1
Notes
Full support 5.1
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android No support NoSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, Rav, Sebastianz, teoli, mirinae312
최종 변경자: urty5656,