테두리 둥글게 만드는 속성

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

border-radius는 요소 테두리의 모서리를 둥글게 만드는 CSS 속성입니다. 테두리를 그리지 않아도 배경의 모서리를 둥글게 만들 수 있으며, 정사각형에 50%를 적용하면 원, 가로·세로 길이가 다른 직사각형에 적용하면 타원이 됩니다.

값 1~4개와 모서리 적용 순서

값 개수	적용 순서
1개: 20px	네 모서리 모두
2개: 10px 30px	왼쪽 위·오른쪽 아래 / 오른쪽 위·왼쪽 아래
3개: 10px 30px 50px	왼쪽 위 / 오른쪽 위·왼쪽 아래 / 오른쪽 아래
4개: 10px 30px 50px 0	왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래

길이 단위 px·rem이나 백분율을 사용할 수 있고 음수는 유효하지 않습니다. 네 값을 적을 때는 왼쪽 위에서 시작해 시계 방향으로 돌아갑니다. margin의 위·오른쪽·아래·왼쪽 순서와 혼동하지 마세요. 반경 0은 해당 모서리를 직각으로 둡니다.

가로 반경과 세로 반경이 같다면 위처럼 슬래시 없이 씁니다. 다른 값이 필요하면 슬래시 앞에 가로 반경, 뒤에 세로 반경을 적습니다. 각 묶음 안에서 1~4개 값의 축약 규칙이 따로 적용됩니다.

.box {
  border-radius: 20px 40px 60px 80px / 80px 60px 40px 20px;
}

위 선언에서 왼쪽 위 모서리의 가로 반경은 20px, 세로 반경은 80px입니다. 오른쪽 위는 40px·60px, 오른쪽 아래는 60px·40px, 왼쪽 아래는 80px·20px입니다. border-radius: 80px / 40px는 네 모서리 모두 가로 80px·세로 40px로 지정하는 축약입니다.

전체 예제: 둥근 사각형·원·타원 비교

아래 코드를 radius.html로 저장하고 브라우저에서 여세요. 필요한 외부 파일은 없습니다. 같은 색과 테두리를 유지하면서 반경과 가로·세로 비율에 따른 모양을 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>모서리 반경 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 12px; max-width: 520px; }
    figure { margin: 0; }
    figcaption { margin-bottom: 8px; font-size: 14px; }
    .shape { width: 140px; height: 100px; max-width: 100%;
      border: 3px solid #17516b; background: #77c9cb; }
    .rounded { border-radius: 20px; }
    .corners { border-radius: 10px 30px 50px 0; }
    .circle { width: 100px; border-radius: 50%; }
    .ellipse { border-radius: 50%; }
  </style>
</head>
<body>
<h1>border-radius 모양 비교</h1>
<div class="samples">
  <figure><figcaption>같은 반경 20px</figcaption><div class="shape rounded"></div></figure>
  <figure><figcaption>네 모서리 서로 다르게</figcaption><div class="shape corners"></div></figure>
  <figure><figcaption>정사각형 + 50% = 원</figcaption><div class="shape circle"></div></figure>
  <figure><figcaption>직사각형 + 50% = 타원</figcaption><div class="shape ellipse"></div></figure>
</div>
</body>
</html>

첫 모양은 네 모서리가 같은 20px입니다. 두 번째 모양은 왼쪽 아래가 0이라 직각으로 남습니다. 아래의 두 모양은 모두 50%이지만 원은 100×100px, 타원은 140×100px입니다. box-sizing: border-box 덕분에 이 수치에는 테두리가 포함됩니다.

첫 모양의 20px만 40px로 바꾸어 더 둥글어지는지 확인한 다음 되돌리세요. 이번에는 .circle의 width만 140px로 바꾸면 높이는 100px 그대로이므로 원이 타원으로 변합니다. 원을 유지하려면 정사각형 크기를 유지하거나 aspect-ratio: 1을 사용하면서 높이 고정값과 충돌하지 않게 정리해야 합니다.

백분율·큰 반경과 개별 모서리 설정

백분율 가로 반경은 요소 너비, 세로 반경은 높이를 기준으로 계산합니다. 따라서 50%가 언제나 원을 뜻하지 않습니다. 인접한 반경의 합이 변 길이보다 커지면 브라우저는 모서리가 겹치지 않도록 반경들을 비례 축소합니다. 큰 값을 계속 늘려도 지정한 픽셀 수만큼 모양이 계속 바뀌는 것은 아닙니다.

모서리 하나만 바꾸려면 개별 속성을 사용합니다. 단축 속성 뒤에 아래 선언을 추가하면 왼쪽 위만 가로 40px·세로 10px로 덮어씁니다. 순서를 반대로 놓으면 뒤의 border-radius가 개별 설정을 다시 덮을 수 있으므로 개발자 도구에서 최종 적용 값을 확인하세요.

.box {
  border-radius: 20px;
  border-top-left-radius: 40px 10px;
}

나머지 이름은 border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius입니다. 개별 속성은 가로·세로 반경 두 값을 공백으로 구분하며 슬래시를 쓰지 않습니다. 하나만 적으면 두 반경에 같은 값을 사용합니다.

자식 이미지가 모서리 밖으로 보일 때

부모의 border-radius가 자식 요소까지 자동으로 잘라 주지는 않습니다. 카드 안의 이미지나 배경을 부모의 둥근 윤곽에 맞춰 자르려면 필요한 경우 overflow: hidden을 함께 사용합니다. 이 설정은 밖으로 나오는 내용·그림자 등을 가릴 수 있으므로 메뉴와 포커스 표시가 잘리지 않는지도 확인하세요.

.card {
  border-radius: 20px;
  overflow: hidden;
}
.card img {
  display: block;
  max-width: 100%;
  height: auto;
}

표에서 모양이 예상과 다르면 border-collapse: collapse 여부도 확인해야 합니다. 둥근 외곽이 필요한 표는 표 자체의 처리 범위와 별도 감싸는 요소의 잘라내기를 구분해 설계하세요. 값의 축약 규칙과 적용 조건은 MDN border-radius 문서에서 확인할 수 있습니다.

CSS