상자 모퉁이 둥글게 만들기

이 포스트에서는 CSS를 이용하여 상자의 모퉁이를 둥글게 만드는 기법을 서술합니다.

예전에는 둥근 모퉁이를 구현하려면 배경 이미지를 이용하거나 플래시를 사용하여 둥근 모퉁이 버튼을 만드는 등의 방법을 사용하였지만, 현재는 CSS만으로도 둥근 모퉁이를 구현할 수 있어서 굳이 이런 방법을 쓸 이유가 없게 되었습니다.

CSS에서 둥근 모퉁이를 구현하는 프로퍼티는 border-radius입니다. 일단 다음 코드를 봅시다.

.radius_box {
	display: inline-block;
	padding: 9px;
	line-height: 20px;
	border: 1px solid;
	border-radius: 10px;
}

이는 클래스명이 radius_box인 요소에 대해 반경 10픽셀 크기로 모서리를 둥글게 하는 코드입니다. 실제로 적용해 보면,

이와 같이 모서리가 둥글게 되면서 태두리도 둥근 모서리로 표시되는 것을 알 수 있습니다.

또한, 상자의 높이를 계산한다면 다음과 같이 양 끝이 반원형인 막대도 구현할 수 있습니다.

.radius_box {
	display: inline-block;
	padding: 5px 15px 5px 15px;
	line-height: 20px;
	background-color: #0000aa;
	color: #55ff55;
	border-radius: 15px;
}

이 코드에서는 높이를 안쪽 여백 포함 30픽셀로 계산하고 모퉁이 반경을 15픽셀로 한 예입니다.

이와 같이 표시됩니다.

위의 예시에서는 배경색이 둥글게 된 모퉁이에 맞춰져 있습니다. 배경색 뿐만 아니라 배경그림도 둥글게 된 모퉁이에 맞춰 표시됩니다.

또, 다음과 같이 반경을 절대적인 수치가 아닌 상대적인 수치(퍼센트)로 할 수도 있습니다. 다만, 모서리의 반경을 상대적인 수치로 지정할 경우 타원형으로 표시되는 경우가 있을 수 있습니다. 다음 코드를 봅시다.

.radius_box {
	display: inline-block;
	padding: 10px;
	line-height: 20px;
	background-color: #aa0000;
	color: #ffff55;
	border-radius: 50%;
}

이는 폭과 높이의 절반(50%)을 반경으로 모서리를 둥글게 하는 코드인데,

이와 같이 직사각형인 상자는 타원으로 표시됩니다.

그리고, 4개의 모퉁이에 대해 각자 다른 값을 지정하여 비대칭 형태로 만들 수도 있습니다. 다음 코드를 봅시다.

.radius_box {
	display: inline-block;
	padding: 10px;
	line-height: 20px;
	background-color: #aa5500;
	color: #ffff55;
	border-radius: 30px 20px 10px 0;
}

위와 같이 border-radius 값을 4개로 줄 경우 왼쪽 위부터 시계방향으로 반경이 다르게 됩니다. 이 예시처럼 30px 20px 10px 0 순서로 지정하면 왼쪽 위(↖)는 30픽셀, 오른쪽 위(↗)는 20픽셀, 오른쪽 아래(↘)는 10픽셀, 왼쪽 아래(↙)는 둥글게 하지 않는 모양이 됩니다.

참고로 border-radius 값은 2개 혹은 3개로 줄 수 있습니다. 이 경우 정리하자면,

• border-radius: A; (1개) = border-radius: A A A A;
• border-radius: A B; (2개) = border-radius: A B A B;
• border-radius: A B C; (3개) = border-radius: A B C B;

이런 공식이 성립합니다. 즉, 1개는 4개의 모퉁이에 같은 값 적용, 2개는 좌상-우하, 우상-좌하 2쌍에 같은 값 적용, 3개는 좌상, 우상-좌하, 우하 순으로 적용합니다.

이와 같이 모퉁이가 둥글게 표시되는 CSS를 구현할 수 있습니다.