<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>보더 레디어스</title>
<style>
.wrap {
position:absolute; left:50%; top:100px; /*박스의 위치를 왼쪽에서 50%, 위에서 100px 아래의 위치로 지정한다.*/
width:500px; margin-left:-250px;
background:orange;
}
h2 {text-align:center; text-transform:uppercase;}
.corner1 {
width:200px; height:200px;
background:skyblue;
border-radius:50px; /*박스의 모서리를 둥글게 처리한다.*/
}
.corner2 {
width:200px; height:200px;
background:beige;
border-radius:50px 100px 25px 75px;
/*박스의 모서리마다 다른 크기로 둥글게 처리한다.*/
/*첫번째 값이 왼쪽상단, 두번째 값이 오른쪽 상단, 세번째 값이 오른쪽 하단, 네번째 값이 왼쪽 하단이다.*/
}
.corner3 {
width:200px; height:200px;
background:aquamarine;
border-radius:100px 10px;
/*첫번째 값으로 왼쪽상단과 오른쪽 하단, 두번째 값으로 오른쪽 상단과 왼쪽 하단의 모서리를 둘글게 처리한다.*/
}
.corner4 {
width:300px; height:100px; /*레이아웃과 관련된 스타일 속성*/
border:2px solid #F00; /*스타일과 관련된 스타일 속성*/
border-radius:50px; /*박스 높이의 절반 크기를 지정*/
}
</style>
</head>
<body>
<!-- 부모 박스로 자식 박스를 감쌀때 사용하는 이름이 wrap이나 container이다. -->
<div class="wrap">
<h2>border-radius</h2>
<div class="corner1"></div>
<div class="corner2"></div>
<div class="corner3"></div>
<div class="corner4"></div>
<div class="corner5"></div>
</div>
</body>
</html>
결과
