border-radius 속성

개요

border-radius 속성은 테두리를 둥글게 표시해준다.

<※ ie8이하 미지원>

px, em등의 단위를 사용하며 border-top-left-radius , border-bottom-right-radius 같은 속성이나 margin/padding처럼 띄어쓰기를 구분으로 4개 모서리를 각각 설정 할 수 있다.

사용법

#box { border-radius: 7px 2px 15px 5px}
#box2 { border-radius: 3px}

예제

<html>
<head>
<style>
	#box { border-radius: 0px 5px 10px 15px; border:3px solid;}
	#box2 { border-radius: 5px; border:3px solid}
</style>
</head>

<body>
	<div id="box">Border Radius Test</div> <br>
	<div id="box2">Border Radius Test2</div>
</body>
</html>
출력 결과:
Border Radius Test

Border Radius Test2