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;
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset (4) | 2019.08.12 |
|---|---|
| [HTML] 이미지에 링크거는 방법 - <a>, href, <img> (1) | 2019.08.10 |
| [HTML, CSS] 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover (11) | 2019.08.10 |
| [HTML, CSS] div 태그에 배경화면 지정하는 방법 (0) | 2019.08.09 |
| [HTML, JAVASCRIPT] 버튼 클릭 시 이미지를 변경하는 방법 (5) | 2019.08.09 |
