Categories: CSS

CSS border-radius CSS 모서리 테두리 둥글게 만들기

css

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>

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>

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>

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>

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>