Front-End/CSS
[CSS] Ex13_borderRadius.html
이뮨01
2023. 6. 12. 11:53
꼭짓점 경계선을 둥글게 만들어주는 속성인 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는 비율이 똑같이 둥글어지고, %는 나뭇잎? 변의 길이의 비율에 맞게 둥글어진다.