CSS border-radius 속성
border-radius 는 요소의 모서리, 테두리 부분을 둥글게 만들 때 사용되는 CSS 속성입니다.
border-radius 의 값은 해당 모서리의 둥글기를 나타냅니다.
border-radius 속성은 1개, 2개, 3개, 4개의 값을 가질 수 있습니다.
개수에 따라서 값이 적용되는 위치가 달라집니다.
- border-radius 값이 1개라면
- 모든 모서리에 동일한 값이 적용됩니다.
- border-radius 값이 2개라면
- 첫번째 값은 왼쪽 위 / 오른쪽 아래 모서리
- 두번째 값은 오른쪽 위 / 왼쪽 아래 모서리
- border-radius 값이 3개라면
- 첫번째 값은 왼쪽 위 모서리
- 두번째 값은 오른쪽 위/왼쪽 아래 모서리
- 세번째 값은 오른쪽 아래 모서리
- border-radius 값이 4개라면
- 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리에 시계 방향으로 값이 적용 됩니다.
각각 다른 위치에 값을 따로 지정 해 줄 수도 있습니다.
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
CSS border-radius 예제
1개의 값 지정
border-radius 에 1개의 값을 지정하면, 모든 모서리에 동일한 값이 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 모든 모서리에 20px의 값을 적용 */
border-radius: 20px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
1개의 값을 적용해 모든 모서리에 동일한 20px 의 값을 주었습니다.
2개의 값 지정
border-radius 에 2개의 값을 지정하면
첫 번째 값은 왼쪽 위와 오른쪽 아래의 모서리,
두 번째 값은 오른쪽 위와 왼쪽 아래의 모서리에 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 왼쪽 위,오른쪽 아래 20px / 오른쪽 위,왼쪽 아래 40px */
border-radius: 20px 40px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
첫 번째 값 20px 은 왼쪽 위와 오른쪽 아래의 모서리에 적용,
두 번째 값 40px 은 오른쪽 위와 왼쪽 아래의 모서리에 적용 됩니다.
3개의 값 지정
border-radius 에 3개의 값을 지정하면 순서대로
왼쪽 위, 오른쪽 위/왼쪽 아래, 오른쪽 아래의 모서리에 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 왼쪽 위 / 오른쪽 위+왼쪽 아래 / 오른쪽 아래의 모서리에 값을 적용 */
border-radius: 10px 50px 100px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
왼쪽 위 10px, 오른쪽 위+왼쪽 아래 50px, 오른쪽 아래 100px 의 값을 적용
4개의 값 지정
border-radius 에 4개의 값을 지정하면 순서대로
왼쪽 위 / 오른쪽 위 / 오른쪽 아래 / 왼쪽 아래의 모서리에 적용됩니다.
즉 왼쪽 위부터 시계 방향으로 적용 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 왼쪽 위 부터 시계방향으로 값을 적용 */
border-radius: 10px 20px 30px 40px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
왼쪽 위 모서리부터 시계 방향으로 10px 20px 30px 40px 을 순서대로 적용했습니다.
왼쪽 위 모서리부터 시계 방향으로 더 둥글게 적용되는 것을 확인 할 수 있습니다.
원형 만들기
이번에는 아주 유용한 기능인 원형 만들기 입니다.
border-radius 를 50% 로 1개의 값만 주게 되면,
모서리 모두 50% 의 값이 적용되어 원형으로 나타나게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.circle {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
/* 원 모양을 만들기 위해 50% 값을 적용 */
border-radius: 50%;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="circle">
<p>원 모양</p>
</div>
</body>
</html>
border-radius: 50%; 로 원이 만들어졌습니다.
결론
CSS border-radius 속성에 대하여 알아봤습니다.
다양한 표현을 할 수 있으며 웹 개발에서 유용하게 활용 할 수 있습니다.