Properties

Properties

Editing
  • account_tree
  • bug_report

border-radius

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

사용 가능한 값 타입

〈length-percentage〉

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

구문

  • 〈length-percentage [0,∞]〉{1,4} [ / 〈length-percentage [0,∞]〉{1,4} ]?

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

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

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

테스트 도구

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

지원 웹브라우저