CSS 강좌 | Box Model > Border > border-radius

border-radius 속성으로 둥근 모서리를 만들 수 있습니다. 박스에서 모서리는 네 개 있으므로 속성도 네 개로 나뉘어집니다.

  • border-top-left-radius : 위 왼쪽
  • border-top-right-radius : 위 오른쪽
  • border-bottom-right-radius : 아래 오른쪽
  • border-bottom-left-radius : 아래 왼쪽

속성값을 정하는 방법은 다 같으니 border-top-left-radius로 값을 정하고 결과를 살펴보도록 하겠습니다. 문법은 다음과 같습니다.

selector {border-top-left-radius: xx yy;}

border-top-left-radius 속성에 두 개의 값이 들어가는데, 앞의 것이 가로 반지름의 길이, 뒤의 것이 세로 반지름의 길이입니다.

간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS | border-radius</title>
    <style type="text/css">
      .bb {
        padding: 10px 20px 10px 20px;
        border: 5px solid #cccccc;
        text-align: center;
      }
      .bbr {
        border-top-left-radius: 60px 40px;
      }
    </style>
  </head>
  <body>
    <div class="bb bbr">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </body>
</html>

아래의 결과에서 빨간색의 길이가 60px, 파란색의 길이가 40px입니다.

반지름의 길이는 백분율로 정할 수도 있습니다.

.bbr {
  border-top-left-radius: 50% 100%;
}

속성값을 하나만 쓰면 가로 반지름의 길이와 세로 반지름의 길이가 같다는 뜻입니다. 예를 들어 다음의 두 줄은 같은 의미입니다.

border-top-left-radius: 30px;
border-top-left-radius: 30px 30px;

네 모서리를 각각 정하는 것이 번거로우므로 보통 border-radius 속성으로 한번에 만듭니다.

selector {border-radius: xx xx xx xx / yy yy yy yy;}

xx는 가로 반지름의 길이입니다. 순서대로 위 왼쪽, 위 오른쪽, 아래 오른쪽, 아래 왼쪽입니다. yy는 세로 반지름의 길이로 순서는 가로와 같습니다.

.bbr {
  border-radius: 100px 0px 100px 0px / 80px 0px 80px 0px;
}

세로 반지름의 길이를 정하지 않으면 가로 반지름의 길이와 같은 값을 사용합니다. 예를 들어 다음의 두 줄은 같은 의미입니다.

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

속성값을 하나만 쓰면 네 모서리 모두 같은 값을 사용합니다. 예를 들어 다음의 두 줄은 같은 의미입니다.

border-radius: 20px;
border-radius: 20px 20px 20px 20px;

속성값을 두개 쓰면 앞의 값은 위 왼쪽과 아래 오른쪽, 뒤의 값은 위 오른쪽과 아래 왼쪽의 반지름의 길이입니다. 예를 들어 다음의 두 줄은 같은 의미입니다.

border-radius: 20px 40px;
border-radius: 20px 40px 20px 40px;

속성값을 세개 쓰면 가운데 값을 위 오른쪽과 아래 왼쪽에 사용합니다. 예를 들어 다음의 두 줄은 같은 의미입니다.

border-radius: 20px 40px 60px;
border-radius: 20px 40px 60px 40px;

주의할 점은 border-radius 속성은 IE 8 이하에서는 지원하지 않는다는 것입니다.

Category

Created on 2013-12-03 23:17 | Updated on 2015-07-16 23:30

이 글을 공유하기

Kakao

Book navigation