border-radius 속성

border-radius 속성은 테두리와 배경에 둥근 모서리를 만듭니다. 속성 값으로는 모든 크기 단위를 사용할 수 있습니다. 기본값: 0. 이 속성은 border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius 속성의 단축 속성입니다.

구문

선택자 {
	border-radius: 값;
}

값의 개수

이 속성은 1개, 2개, 3개 또는 4개의 값을 공백으로 구분하여 사용할 수 있습니다:

개수	설명
`1`	모든 모서리에 동시에 적용됩니다.
`2`	첫 번째 값은 오른쪽 위와 왼쪽 아래 모서리의 둥글기를 설정하고, 두 번째 값은 왼쪽 위와 오른쪽 아래 모서리의 둥글기를 설정합니다.
`3`	첫 번째 값은 왼쪽 위 모서리의 둥글기를 설정하고, 두 번째 값은 오른쪽 위와 왼쪽 아래 모서리의 둥글기를 동시에 설정하며, 세 번째 값은 오른쪽 아래 모서리의 둥글기를 설정합니다.
`4`	첫 번째 값은 왼쪽 위 모서리의 둥글기를 설정하고, 두 번째 값은 오른쪽 위 모서리의 둥글기를 설정하며, 세 번째 값은 오른쪽 아래 모서리의 둥글기를 설정하고, 네 번째 값은 왼쪽 아래 모서리의 둥글기를 설정합니다.

타원형 둥글기

슬래시(/)로 구분된 두 개의 값은 타원형 둥글기를 설정합니다. 슬래시 앞의 값은 수평 둥글기를, 슬래시 뒤의 값은 수직 둥글기를 지정합니다:

선택자 {
	border-radius: 수평 / 수직;
}

여러 모서리에 대한 둥글기를 지정하는 경우, 슬래시 앞에는 모든 수평 둥글기를 나열하고, 슬래시 뒤에는 모든 수직 둥글기를 나열합니다.

예제

모든 모서리에 10px 둥글기를 설정합니다:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

예제

점선 테두리에서 둥글기가 어떻게 보이는지 확인해 봅시다:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

예제

한 대각선의 모서리에 10px 둥글기를, 다른 대각선의 모서리에 40px 둥글기를 설정합니다:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

예제

왼쪽 위 모서리에 10px 둥글기를, 오른쪽 아래 모서리에 30px 둥글기를, 다른 대각선의 모서리(오른쪽 위와 왼쪽 아래)에 50px 둥글기를 설정합니다:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

예제

각 모서리에 서로 다른 둥글기를 설정합니다:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

예제

타원형 둥글기를 만들어 봅시다. 수평 부분의 둥글기를 20px로, 수직 부분의 둥글기를 40px로 설정합니다:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

예제

이번에는 각 모서리에 서로 다른 타원형 둥글기를 개별적으로 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

예제

정사각형 블록에 변 길이의 절반에 해당하는 둥글기를 설정하면 원이 됩니다:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

예제

정사각형의 변 길이보다 큰 둥글기를 설정해도 역시 원이 됩니다:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

예제

border-radius를 50%로 설정해도 원을 만들 수 있습니다 (장점은 정사각형 크기를 변경할 때 둥글기를 변경할 필요가 없다는 점입니다):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

예제

직사각형에 퍼센트(%)로 border-radius를 설정하면 타원형 둥글기가 됩니다. 너비가 400px이고 높이가 200px인 경우, border-radius를 10%로 설정하는 것은 40px/20px로 설정하는 것과 같습니다:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

예제

직사각형에 border-radius를 50%로 설정하면 타원이 됩니다:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

예제

border-radius 속성은 테두리의 모서리뿐만 아니라 배경의 모서리도 둥글게 만듭니다:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

참고

border 속성,
이는 테두리에 대한 단축 속성입니다