mozilla
검색 결과

    border-radius

    요약(Summary)

    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)을 사용해야 한다.

    문법(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 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 Not supported Not supported 2.1-webkit
    Elliptical borders ? Not supported Not supported ?
    4 values for 4 corners ? Not supported Not supported ?
    Percentages ? Not supported Not supported ?

    <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

    문서 태그 및 공헌자

    Contributors to this page: mirinae312, teoli
    최종 변경: teoli,