<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* div {
width: 100px;
height: 100px;
background-color: salmon;
/* 1. 왼쪽 위 테두리를 둥글게 */
/* border-top-left-radius: 50%; */
/* 2. 왼쪽 아래 테두리를 둥글게 */
/* border-bottom-left-radius: 50%; */
/* 3. 오른쪽 아래 테두리를 둥글게 */
/* border-bottom-right-radius: 50%; */
/* Q. 도형을 원으로 만들어주려면? */
/* border-top-right-radius: 50%; */
/* 한줄로 원 만들기 */
/* border-radius: 50%; */
/* 타원 만들기 */
/* padding: 10px(위, 아래) 10px(좌, 우); */
/* padding: 0 50px; */
div {
width: 100px;
height: 100px;
background-color: green;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
댓글