CSS를 사용해 박스 형태의 인터페이스 테두리(외곽선)를 부드럽게 만들기 위해서 어떻게 해야할까요?



# 테두리 외곽선 둥글게 만들기, border-radius과거에는 브라우저의 호환성을 위해 대부분 백그라운드 이미지를 활용하는 방법을 많이 사용했습니다. 하지만 최근에는 대부분의 브라우저가 둥글게 보이도록 만드는 border-radius 속성을 대부분 지원하기 때문에 어렵게 이미지 작업을 하지 않아도 css만으로 간단하게 사용 가능합니다.

참고로 테두리를 만드는 스타일인 속성 border가 없더라도 둥글게 표현되니 참고하세요. 아래는 간단한 문법, 사용 방법입니다.

border-radius: value

위의 방법으로 값을 지정할때는 얼마만큼 둥글게 표현할 것인지를 결정할 수 있습니다. 값은 아래와 같이 픽셀 또는 퍼센트를 입력하여 사용합니다.
border-radius: 2px;
border-radius: 10px;
// 픽셀(pixel) 단위의 값을 지정함

bordr-radius: 50%;
// 상대적인 수치를 사용한 방법도 가능함

위처럼 픽셀(px) 단위를 사용하기도 하지만 %를 사용하여 상대적인 수치 만큼 지정할 수도 있습니다.

! 픽셀과 퍼센트 값의 차이점은?퍼센트를 사용한 방법의 경우 픽셀을 사용한 방법과 동일하지 않습니다. 이 둘은 차이점이 있는데 그 차이점은 % 단위 사용시 사각형의 가로 길이에 대하여도 비율만큼의 크기가 둥글게 외곽선이 표현된다는 점입니다.

일반적인 픽셀 사용시에는 둥글게 표현되는 크기가 가로와 세로 동일한 값으로 적용됩니다. 그럼 아래부터는 다양한 예제를 보면서 자세히 알아보겠습니다.



# border-radius 속성 예제소스 보기아래는 네모난 영역에 속성을 적용하여 테두리를 둥글게 만들어 본 코드입니다. 아래를 확인하세요.

! 픽셀값을 사용한 예제보기먼저 아래는 픽셀을 값으로 사용한 경우 어떻게 나타나는지 확인해보세요.
@ border.html
<div>12</div>

@ border.css
div {
   width: 100px;
   height: 50px;
   border: 1px solid red;
   border-radius: 10px;
}
이 코드를 실행할 경우 나타나는 모습은 다음과 같습니다.


보시는 것과 같이 우리가 원하는 둥근 테두리가 만들어졌습니다.


! 퍼센트 값을 사용한 예제보기만약 픽셀단위가 아닌 퍼센트(%)인 경우 어떻게 될까요? 아래에서 확인해 보세요.
@ border.html
<div>Percent</div>

@ border.css
div {
  width: 100px;
  height: 50px;
  border-radius: 20%;
}
위 코드를 실행하면 아래와 같이 나타나게됩니다.

Percent

퍼센트값을 적용하면 항상 같은 정도로 표현되지 않으며 적용대상의 width 및 height값에 따라 굴곡이 다르게 적용됩니다.



# 테두리의 원하는 모서리만 선택 적용하기위 예제들은 모든 테두리에 동일한 둥근 스타일이 적용되었습니다. 만약 모서리마다 각각 다른 스타일을 적용하려면 어떻게할까요?
.test {
   border-top-left-radius: 3px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 10px;
   // 원하는 모서리를 선택하여 적용하는 방법
}
위 코드는 아래와 같이 나타나게됩니다.

! 한줄에 각각 테두리 적용하는 방법위와 같이 위치값에 따른 다른 속성을 사용할 수 있지만 아래처럼 한줄에 사용하는 방법이 코드가 간결합니다. 시작지점부터 상좌, 상우, 하좌, 하우 방향입니다.
.test {
  border-radius: 3px 5px 8px 10px;
}

실행하면 아래처럼 적용되어 나타납니다.




# 마치면서여기까지 다양한 방법의 border-radius 사용예제를 알아보았습니다. 이처럼 이미지 사용없이 편리하게 테두리를 둥글게 표현해주는 속성이지만 오래된 브라우저의 경우 .. 예를들어 border-radius는 익스플로러(IE) 8 이하에서는 구현되지 않기때문에 다른 방법(역시 이미지)이 필요합니다.