CSS / border-radius - 테두리 둥글게 만드는 속성

border-radius

  • border-radius는 테두리를 둥글게 만드는 속성입니다.
  • CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법)
  • 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다.
  • 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다.

문법 1

  • 속성의 값에는 px, % 등 길이 단위를 넣습니다. 그 길이만큼 둥글게 만듭니다.
  • 8군데의 길이를 정해야 하는데, 각 위치는 다음과 같습니다.

예제 1

위치별로 다른 크기를 넣은 예제입니다. 어느 값이 어디 위치를 가리키는지 확인할 수 있습니다.

문법 2

  • 대각선 방향으로 값이 같을 때 사용할 수 있습니다.
  • 다음과 의미가 같습니다.

예제 2

문법 3

  • 네 곳이 모두 같을 때 사용할 수 있습니다.
  • 다음과 의미가 같습니다.

예제 3

문법 4

  • 가로 방향과 세로 방향의 값이 같다면 앞에 부분만 쓸 수 있습니다.
  • 다음과 의미가 같습니다.

예제 4

문법 5

  • 다음과 의미가 같습니다.

예제 5

문법 6

  • 다음과 의미가 같습니다.

예제 6

위치별 속성

각 위치를 가리키는 속성이 따로 있습니다. 예를 들어

는 다음과 같습니다.

값을 하나만 쓰면 가로 방향과 세로 방향의 값이 같다는 뜻입니다. 예를 들어

는 다음과 같습니다.