꼭짓점 경계선을 둥글게 만들어주는 속성인 border-radius를 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* border-radius : 경계선을 둥글게 만들어주는 속성
border - 위/아래 - 좌/우 - radius
ex) 우측 상단을 둥글게 만들어주고 싶다
border-top-right-radius
*/
div{
width: 100px;
height: 100px;
background-color: green;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
/* 원을 만들고 싶다 (원) */
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
정사각형을 기준으로 하면 px, % 상관없지만,
직사각형을 기준으로 하면 px는 비율이 똑같이 둥글어지고, %는 나뭇잎? 변의 길이의 비율에 맞게 둥글어진다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex15_position.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex14_background.html (0) | 2023.06.12 |
| [CSS] Ex12_BoxSizing.html (0) | 2023.06.12 |
| [CSS] Ex11_padding.html (0) | 2023.06.12 |
| [CSS] Ex10_margin.html (0) | 2023.06.12 |
