Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-radius

요약

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:
Animatableas each of the properties of the shorthand:
  • border-top-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • border-top-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • border-bottom-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • border-bottom-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
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)

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

문서 태그 및 공헌자

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