border-radius

border-radius: 50px;

border-radius: 0px 20px;

border-radius: 0px 20px 40px;

border-radius: 0px 10px 20px 30px;

border: 4px solid orange;
border-radius: 30px;

"> 03-04_border_radius

border-radius

border-radius: 50px;

border-radius: 0px 20px;

border-radius: 0px 20px 40px;

border-radius: 0px 10px 20px 30px;

border: 4px solid orange;
border-radius: 30px;

"> 03-04_border_radius

border-radius

border-radius: 50px;

border-radius: 0px 20px;

border-radius: 0px 20px 40px;

border-radius: 0px 10px 20px 30px;

border: 4px solid orange;
border-radius: 30px;

<!-- 03_box-model/03-04_border_radius.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-04_border_radius</title>
<!--  
	# border-radius
	- border-radius 속성을 사용하면 박스의 네 모서리를 둥글게 만들 수 있습니다
-->
<style type="text/css">
div {
	width: 300px;
	padding: 20px;
	background-color: gold;
	text-align: center;
}

.round_1 { border-radius: 50px; }
.round_2 { border-radius: 0px 20px; }
.round_3 { border-radius: 0px 20px 40px; }
.round_4 { border-radius: 0px 10px 20px 30px; }
.round_5 {
	border: 4px solid orange;
	border-radius: 30px;
}

</style>
</head>
<body>
	<h1>border-radius</h1>
	<br/>
	<div class="round_1">
		border-radius: 50px;
	</div>
	<br/>
	<div class="round_2">
		border-radius: 0px 20px;
	</div>
	<br/>
	<div class="round_3">
		border-radius: 0px 20px 40px;
	</div>
	<br/>
	<div class="round_4">
		border-radius: 0px 10px 20px 30px;
	</div>
	<br/>
	<div class="round_5">
		border: 4px solid orange;<br/>
		border-radius: 30px;
	</div>
	<br/>
</body>
</html>