프론트엔드 HTML CSS JAVASCRIPT
[HTML, CSS] div 요소를 동그랗게 만드는 방법 - border radius
jaewooojung
2019. 8. 10. 01:19
border-radius
css의 border-radius 속성을 사용해서 기본 사각형인 요소들의 모서리의 형태를 바꿀 수 있습니다.
div 뿐만이 아니라 border가 있는 다른 html 요소들에도 적용이 가능합니다.
border-radius 적용 전의 div입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 800px;
height: 800px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
border-radius 속성으로 4개의 모서리 부분을 동그랗게 만들 수 있습니다.
border-radius: top-left top-right bottom-right bottom-left
위/왼쪽, 위/오른쪽, 아래/오른쪽, 아래/왼쪽 (시계방향) 순서대로 각 모서리의 반지름의 길이를 전달합니다.
<style>
.container {
width: 800px;
height: 800px;
border: 1px solid black;
border-radius: 100px 200px 300px 400px;
}
</style>
4방향의 값이 모두 동일하다면 한 개만 전달하면 됩니다.
<style>
.container {
width: 800px;
height: 800px;
border: 1px solid black;
border-radius: 400px;
}
</style>
px뿐만 아니라 %나 em단위로도 설정할 수 있습니다.
border-radius: 30%;
border-radius: 3em;