We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

요약

CSS의 border-radius 속성에는 둥근외곽선(rounded border)를 표현하는 방법이 정의되어 있다. 하나 혹은 두개의 반지름을 설정하여 각각 모서리의 굴곡을 설정할 수 있기 때문에, 원 혹은 타원의 모양으로 정의가 가능하다.

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

엘리먼트(element)에 외곽선(border)가 없어도, 반지름(radius)값은 background 속성에 적용된다. 잘려나가는(clipping) 부분에 대한 정확한 위치는 background-clip 속성값에 따라 결정된다.

4개의 모서리에 설정가능한 단축속성(shorthand)도 다음과 같이 제공된다. border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

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

초기값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

문법(Syntax)

기본문법: [ <length> | <percentage> ]{1,4}  [ / [ <length> | <percentage> ]{1,4}] ? 
                \------------------------------/      \-------------------------------/
                           첫번째 반지름(radius) 지정                     두번째 반지름(radius) 지정(생략가능)
첫번째 반지름(radius)값을 지정하는 문법(1~4개 모서리에 설정):
border-radius: radius             
border-radius: top-left-and-bottom-right top-right-and-bottom-left 
border-radius: top-left top-right-and-bottom-left bottom-right 
border-radius: top-left top-right bottom-right bottom-left 

두번째 반지름을 지정하는 문법(1~4개 모서리에 설정):
border-radius: (first radius values) / radius             
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left 
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right 
border-radius: (first radius values) / top-left top-right bottom-right bottom-left 

border-radius: inherit

속성 값(Values)

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의 값을 설정하는 문법에서만 사용된다.
inherit   부모엘리먼트(parent's element)에서 상속된 4개의 계산된 값을 의미하는 키워드.

속성값(Values)

<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;

예제(Examples)

  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%; 

주의사항(Notes)

  • 점(dotted), 파선(dashed)형태의 둥근 모서리 외곽선(rounded border corners)은 Gecko엔진에서는 실선으로 표시된다. bug 382721 를 참고.
  • border-radius 는 border-collapse 속성이 collapse
    테이블 엘리먼트(table element)에는 적용되지 않는다.
  • 오래된 WebKit 엔진은 다중 값(multiple values) 설정을 서로다른 방식으로 다룬다. (아래를 참조)

명세(Specifications)

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

브라우저 호환성(Browser compatibility)

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 4.0 (2.0)
1.0 (1.7 or earlier)-moz
4.0
0.2-webkit
9.0 10.5 5.0
3.0-webkit
Elliptical borders 3.5 (1.9.1) yes yes yes yes, but see below
4 values for 4 corners yes 4.0 yes yes 5.0
Percentages yes
was (see below)
yes yes 11.5 5.1
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support 3.2-webkit No support No support 2.1-webkit
Elliptical borders ? No support No support ?
4 values for 4 corners ? No support No support ?
Percentages ? No support No support ?

<percentage> 속성값(values)

  • 오랜된 버전의 Chrome, Safari에서는 지원되지 않는다. (2010년 11월에 수정되었다.)
  • Opera에서는 11.50 버전 이하에서 오류가 있다.
  • Gecko 2.0 (Firefox 4) 이하에서는 비표준형식으로 구현이 되었다. 수직/수평 반지름은 모두 border가 설정된 영역의 가로(width)에 상대적인 값이다.
  • 오래된 버전의 iOS (5이하) 및 Android (WebKit 532이하)에서는 지원되지 않는다.

Gecko에서의 주의사항

Gecko 2.0에서 -moz-border-radius 는 border-radius 으로 이름이 변경되었는데, Gecko 12.0까지는 -moz-border-radius 라는 이름도 별칭의 형태로 지원되었다. CSS3 표준에 맞추기 위해서 Gecko 2.0은

  • 제안서(specification)에 적합하게 <percentage> 값을 처리하는 방법이 변경되었다. 임의의 크기(size)로 지정된 엘리먼트(element)에 맞는 타원(ellipse)모양의 외곽선(border)를 지정하기 위해서는 border-radius: 50%라고 입력하기만하면 된다.
  • 둥근모서리(rounded corner)가 컨텐츠(contents)와 이미지(image)를 깍아내도록 했다.(overflow visible 값으로 설정되어있지 않은 경우)
주의사항: -moz-border-radius에 대한 지원은 Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) 에서 중단되었다.

WebKit에서의 주의사항

오래된 Safari, Chrome 버전(WebKit 532.5 이전)은

  • 4개 모서리에 설정은 1개의 값으로 설정하는 것만 지원된다. 서로 다른 반지름(radius)값을 지정하기 위해서는 일반속성(Long form properties) 이 사용되어야 한다.
  • 슬래시(/)를 사용할 수 없다.2개의 값이 지정된다면, 4군데의 모서리에 타원형태의 외곽선(border)이 그려질 것이다.
    /* 서로 동일하다: */
    
    -webkit-border-radius: 40px 10px;
            border-radius: 40px/10px;
    

Opera 주의사항

Opera(11.60이전)에서는 교체된 엘리먼트(replaced element)에 border-radius 를 적용해도 둥근 모서리가 표현되지 않는다.

See also

둥근외곽선(Border-radius)과 관련된 CSS속성: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

문서 태그 및 공헌자

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