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

border-radius

  • border-radius는 테두리를 둥글게 만드는 속성입니다.
  • CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법)
  • 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다.
  • 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div {
				box-sizing: border-box;
				width: 200px;
				height: 200px;
				margin: 20px auto;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="jb"></div>
	</body>
</html>

문법 1

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y
  • 속성의 값에는 px, % 등 길이 단위를 넣습니다. 그 길이만큼 둥글게 만듭니다.
  • 8군데의 길이를 정해야 하는데, 각 위치는 다음과 같습니다.

예제 1

.jb {
	border-radius: 20px 40px 60px 80px / 80px 60px 40px 20px;
}

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

문법 2

border-radius: aa bb / cc dd
  • 대각선 방향으로 값이 같을 때 사용할 수 있습니다.
  • 다음과 의미가 같습니다.
border-radius: aa bb aa bb / cc dd cc dd

예제 2

.jb {
	border-radius: 40px 80px / 80px 40px;
}

문법 3

border-radius: aa / bb
  • 네 곳이 모두 같을 때 사용할 수 있습니다.
  • 다음과 의미가 같습니다.
border-radius: aa aa aa aa / bb bb bb bb

예제 3

.jb {
	border-radius: 80px / 40px;
}

문법 4

border-radius: aa bb cc dd
  • 가로 방향과 세로 방향의 값이 같다면 앞에 부분만 쓸 수 있습니다.
  • 다음과 의미가 같습니다.
border-radius: aa bb cc dd / aa bb cc dd

예제 4

.jb {
	border-radius: 20px 40px 60px 80px;
}

문법 5

border-radius: aa bb
  • 다음과 의미가 같습니다.
border-radius: aa bb aa bb / aa bb aa bb

예제 5

.jb {
	border-radius: 40px 80px;
}

문법 6

border-radius: aa
  • 다음과 의미가 같습니다.
border-radius: aa aa aa aa / aa aa aa aa

예제 6

.jb {
	border-radius: 50%;
}

위치별 속성

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

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

는 다음과 같습니다.

border-top-left-radius: 10px 40px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 30px 20px;
border-bottom-left-radius: 40px 10px;

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

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

는 다음과 같습니다.

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

CSS 강좌