Properties

Properties

Draft
  • account_tree
  • bug_report

border-radius

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

설정 가능한 속성 값

  • 0기본값숫자CSS3

    기본 값으로 요소의 모서리를 둥글게 처리하지 않는다.

  • length숫자단위허용CSS3

    숫자와 단위를 이용해서 모서리를 둥글게 처리할 반지름 값을 설정한다.

    • 사용 가능한 단위: px, %

구문

  • border-radius 0;기본값CSS3

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

  • border-radius length;기본형식CSS3

    요소의 모서리의 둥글기 값을 숫자와 단위를 이용해서 설정한다. 기본 값은 0이다.

  • 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' 값으로 왼쪽 하단의 모서리 수평 방향 반지름 값으로 처리된다. '/'의 오른쪽의 수직 방향 반지름 값 리스트도 수평 방향의 규칙을 동일하게 따른다.

테스트 도구

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

지원 웹브라우저