Properties

Properties

Editing
  • account_tree
  • bug_report

border-radius

요소의 모서리를 둥글게 처리한다.

사용 가능한 값 타입

<'border-radius'>

DEVDIC-Specified Data Types

border-radius 속성에 사용되는 타입이다.

요소의 네 모서리에 대한 둥글기를 설정하는 값을 나타낸다.

  • CSS Backgrounds and Borders Module Level 3
    <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

    선택적으로 /를 기준으로 좌우에 값을 작성할 수 있다. /가 없는 경우에는 최소 1개의 값부터 최대 4개의 값까지 공백으로 구분하여 작성이 가능하다. 작성된 값의 갯수에 따라 적용되는 방식이 다르다. 즉 왼쪽 상단 모서리부터 시계 방향으로 작성된 순서에 따라 적용이 되며 4개의 값이 아닐 경우 대각선 방향으로 마주보고 있는 값을 사용하여 처리한다. 작성된 값은 x, y 축에 동일한 반지름 값으로 사용한다.

    최소 한개의 값이 작성이 되었다면 이어서 /를 사용하여 최소 1개, 최대 4개의 값을 공백으로 구분하여 작성할 수 있다. /를 사용한 경우에는 x, y 축의 반지름값을 다르게 설정할 수 있다. 즉 /를 기준으로 왼쪽은 x축, 오른쪽은 y축의 반지름 값으로 사용한다. 각각의 방향에 따라 최대 4개의 값을 작성할 수 있고 작성된 값의 갯수에 따라 왼쪽 상단 모서리부터 시계 방향으로 x축 또는 y축의 반지름값으로 적용되며 값이 없는 경우에는 대각선 방향으로 마주보고 있는 값을 사용한다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <length-percentage>

    <length><percentage> 타입을 나타낸다.

    • CSS Values and Units Module Level 3
      <length> | <percentage>
    Details

    포함된 타입

    • <length>

      숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

      • CSS Basic User Interface Module Level 4
        <length>
      Details

      사용되는 단위

      아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

      • cm

        1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

      • in

        1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

      • mm

        1cm의 1/10 값을 나타낸다.

      • pc

        1in의 1/16 값을 나타낸다.

      • pt

        1in의 1/72 값을 나타낸다.

      • px

        스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

      • Q

        1cm의 1/40을 나타낸다.

      • deg

        보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

      • grad

        400grad(그라디안)은 완전한 원을 만든다.

      • rad

        2π(라디안)이 완전한 원을 만든다.

      • turn

        1turn(턴)이 완전한 원을 만든다.

      • cap

        대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

      • ch

        글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

      • em

        대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

      • ex

        대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

      • ic

        한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

      • lh

        요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

      • rem

        html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

      • rlh

        html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

      • Hz

        1초당 발생한 진동수를 나타낸다.

      • kHz

        1000Hz를 나타낸다.

      • fr

        그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

      • vb

        html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vh

        뷰포트 높이를 상대적으로 1% 높이를 갖는다.

      • vi

        html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vmax

        vw 또는 vh 중 큰 값을 나타낸다.

      • vmin

        vw 또는 vh 중 작은 값을 나타낸다.

      • vw

        뷰포트 너비를 상대적으로 1% 폭을 갖는다.

      • dpcm

        1cm당 점(dot)의 수를 나타낸다.

      • dpi

        1in당 점(dot)의 수를 나타낸다.

      • dppx

        1픽셀(pixel)당 점(dot)의 수를 나타낸다.

      • ms

        1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

      • s

        초를 나타낸다.

    • <percentage>

      어떠한 기준으로 부터 백분율로 표현한다.

구문

  • border-radius: 0;
    CSS3

    요소의 모서리를 둥글게 처리하지 않는다.

  • border-radius: 50%;
    CSS3

    요소의 모든 네 모서리의 반지름 값을 '50%'로 설정해 둥글게 처리한다. 단위가 '%'로 설정되는 경우에는 모서리와 만나는 가로, 세로 변의 길이의 비율로 처리한다. '50%'의 경우는 각각의 모서리에서 만나는 가로, 세로의 변의 길이의 반을 반지름 값으로 처리된다.

  • border-radius: 10px 20px;
    CSS3

    2개의 값을 공백으로 구분하여 작성하는 경우에는 차례대로 요소의 왼쪽 상단 모서리 부터 설정된 반지름 값으로 둥글게 처리한다. 오른쪽 하단, 왼쪽 하단 모서리의 경우에는 대각선 방향으로 서로 마주보고 있는 왼쪽 상단, 오른쪽 상단의 반지름 값으로 둥글게 처리한다. 즉 오른쪽 하단의 경우는 왼쪽 상단의 반지름 값인 10px, 왼쪽 하단의 경우는 오른쪽 상단의 반지름 값인 20px 값으로 둥글게 처리한다.

  • border-radius: 10px 20px 30px;
    CSS3

    3개의 값을 공백으로 구분하여 작성하는 경우에는 차례대로 요소의 왼쪽 상단 모서리부터 설정된 반지름 값으로 둥글게 처리한다. 마지막 왼쪽 하단의 모서리의 경우는 대각선 방향으로 마주보고 있는 값으로 둥글게 처리한다. 즉 왼쪽 하단 모서리는 오른쪽 상단 모서리 반지름 값인 20px 값으로 둥글게 처리한다.

  • border-radius: 10px 20px 30px 40px;
    CSS3

    4개의 값을 공백으로 구분하여 작성하는 경우에는 차례대로 요소의 왼쪽 상단 모서리부터 시계 방향으로 설정된 반지름 값으로 네 모서리를 둥글게 처리한다.

  • border-radius: 10px/20px;
    CSS3

    2개의 값을 '/'로 구분하여 작성하는 경우에는 왼쪽의 값은 모서리의 수평 반지름, 오른쪽은 모서리의 수직 반지름 값으로 수평과 수직을 별도의 반지름 값으로 모서리를 둥글게 처리한다.

  • border-radius: 10px 20px 30px / 15px 30px;
    CSS3

    공백으로 구분된 값을 다시 '/'로 나누어서 작성하는 경우에는 '/' 왼쪽의 공백으로 구분된 값 들은 차례대로 왼쪽 상단 모서리 부터 시계 방향으로 수평 방향의 반지름 값을 의미하며 '/' 오른쪽 공백으로 구분된 값 들은 역시 마찬가지로 왼쪽 상단 모서리 부터 시계 방향으로 수직 방향의 반지름 값을 의미한다. 이러한 설정 방식을 통해 요소의 네 모서리의 수평, 수직의 반지름 값을 다르게 하여 네 모서리를 독립적으로 둥글게 처리할 수 있다.

    만일 수평 또는 수직 방향으로 4개 이하의 값으로 공백으로 구분하여 작성된 경우에는 생략된 모서리의 수평 또는 수직 반지름 값은 대각선 방향으로 마주 보고 있는 모서리의 반지름 값으로 처리한다. 값 설정 예시의 경우, '/' 왼쪽의 수평 반지름 값이 '10px, 20px, 30px' 로 작성되어 있는데 왼쪽 하단 모서리의 수평 반지름 값이 생략된 상태이다. 따라서 대각선 방향으로 마주보고 있는 오른쪽 상단의 모서리 수평 방향 반지름 값인 '20px' 값으로 왼쪽 하단의 모서리 수평 방향 반지름 값으로 처리된다. '/'의 오른쪽의 수직 방향 반지름 값 리스트도 수평 방향의 규칙을 동일하게 따른다.

테스트 도구

축약성 속성으로 요소의 모서리를 둥글게 처리

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저