CSS 둥근 모서리 미리보기
네 모서리의 둥근 정도를 바꾸고, 실제 사용할 너비와 높이에서 모양을 확인하세요. 마음에 드는 설정은 CSS로 복사할 수 있습니다.
모서리 조절
px는 고정 길이입니다. 0~200 사이의 정수를 입력하세요.
모양 프리셋
미리보기 크기
80~480px · 크기를 바꾸며 곡률을 비교하세요.
실시간 미리보기
점선은 원래 사각형입니다. 모서리가 겹치면 브라우저가 반지름을 비례해 줄입니다.
사용할 CSS
border-radius: 24px;값 순서: 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래
슬라이더를 움직이면 모양과 CSS가 함께 바뀝니다.
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
카드와 버튼에 맞는 둥근 모서리 만들기
CSS 둥근 모서리 미리보기는 네 모서리의 반경을 조절하며 border-radius 코드를 만드는 도구입니다. 모서리를 함께 바꾸거나 한쪽만 둥글게 만들고, px와 % 단위에서 달라지는 모양을 확인하세요. 프리셋을 고른 뒤 값을 다듬어도 됩니다.
같은 반경도 상자의 너비와 높이에 따라 다르게 보입니다. 카드처럼 넓은 상자와 정사각형을 번갈아 확인한 뒤 CSS를 복사해 적용하세요. 아래에서는 값의 순서, 퍼센트의 기준, 원과 알약 모양의 차이, 이미지가 둥근 테두리 밖으로 나오는 이유를 설명합니다.
border-radius는 무엇을 바꾸나요?
border-radius는 요소 바깥 테두리의 모서리를 둥글게 만드는 CSS 속성입니다. 반경은 모서리 곡선을 정하는 길이이며, 0이면 각진 모서리로 표시됩니다. 카드, 버튼, 프로필 이미지, 태그처럼 사각형 요소의 인상을 조절할 때 사용합니다.
- 테두리 선이 없어도 배경의 둥근 모서리를 확인할 수 있습니다.
- 반경을 바꿔도 요소의 너비나 높이가 자동으로 바뀌지는 않습니다.
- 내용과 테두리 사이의 여백은 padding으로 따로 정합니다.
네 모서리를 함께 또는 따로 조절하려면?
네 모서리 연결을 켜면 왼쪽 위 값을 기준으로 네 모서리를 맞춥니다. 이후 한 값을 바꾸면 나머지도 함께 바뀝니다. 한쪽만 바꿀 때는 연결을 해제하세요. 모양 프리셋을 선택하면 반경뿐 아니라 단위와 미리보기 크기도 함께 바뀝니다.
- 단위를 고르고 슬라이더나 숫자 입력으로 반경을 정합니다.
- 비대칭 모양은 왼쪽 위·오른쪽 위·오른쪽 아래·왼쪽 아래를 구별해서 입력합니다.
- 미리보기 가로와 세로를 80~480px 범위에서 맞춥니다. 공간이 좁으면 비율을 유지해 축소 표시합니다.
- 모양을 확인한 뒤 CSS 복사를 누릅니다.
CSS에 적힌 네 값은 어떤 순서인가요?
border-radius의 네 값은 왼쪽 위에서 시작해 시계 방향으로 적용됩니다. 예를 들어 border-radius: 8px 16px 24px 32px;는 왼쪽 위 8px, 오른쪽 위 16px, 오른쪽 아래 24px, 왼쪽 아래 32px입니다. 값이 반복되면 한 개에서 세 개로 줄여 쓸 수도 있습니다.
- 한 값: 네 모서리에 모두 적용합니다.
- 두 값: 첫 값은 왼쪽 위·오른쪽 아래, 둘째 값은 오른쪽 위·왼쪽 아래에 적용합니다.
- 세 값: 왼쪽 위, 오른쪽 위·왼쪽 아래, 오른쪽 아래 순서입니다.
- 네 값: 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래 순서입니다.
px와 %는 언제 다르게 보이나요?
px는 CSS 픽셀 단위의 길이이고, %는 테두리를 포함한 요소 크기에 대한 비율입니다. 퍼센트 반경은 가로 방향에 요소 너비를, 세로 방향에 요소 높이를 사용합니다. 너비 240px·높이 120px 상자에서 25%는 가로 반경 60px·세로 반경 30px입니다.
- 크기가 다른 카드에도 같은 길이의 모서리를 쓰려면 px로 비교하세요.
- 상자의 크기에 비례하는 곡선을 원하면 %로 확인하세요.
- 단위를 바꾸면 입력 숫자는 유지됩니다. 24px과 24%는 같은 모양을 보장하지 않습니다.
원, 타원, 알약 모양은 어떻게 만드나요?
너비와 높이가 같은 정사각형에 border-radius: 50%;를 적용하면 원이 됩니다. 가로로 긴 상자에 50%를 적용하면 타원이 됩니다. 양 끝이 반원이고 위아래에 곧은 선이 있는 알약 모양 버튼은 충분히 큰 px 반경을 사용하세요.
- 120px × 120px에 50%: 원형 프로필 이미지 틀에 쓰는 모양입니다.
- 240px × 120px에 50%: 가로로 긴 타원입니다.
- 이 도구의 캡슐 프리셋은 320px × 96px 상자에 200px 반경을 적용합니다.
- 실제 CSS에서 240px × 120px 상자에 9999px를 적용하면 반경이 60px로 조정된 알약 모양이 됩니다. 9999px는 이 도구의 입력 범위를 벗어난 CSS 적용 예시입니다.
위쪽만 둥근 카드와 비대칭 모양 만들기
위쪽 두 모서리만 둥글게 하려면 아래쪽 두 값을 0으로 둡니다. 이미지가 카드 위쪽에만 붙는 구성이나 하단이 다른 영역과 이어지는 패널에 사용할 수 있습니다. 비대칭 모양은 작은 미리보기만 보고 결정하지 말고 실제 콘텐츠가 들어갈 크기에서도 확인하세요.
- 위쪽만 둥글게: border-radius: 24px 24px 0 0;
- 대각선 모서리를 다르게: border-radius: 32px 8px;
- 왼쪽 위만 강조: border-radius: 40px 8px 8px 8px;
큰 숫자를 넣어도 더 둥글어지지 않는 이유
이웃한 두 반경의 합이 한 변의 길이를 넘으면 브라우저가 모든 모서리 반경을 같은 비율로 줄입니다. 모서리 곡선이 서로 겹치지 않도록 하는 CSS 규칙입니다. 너비 240px·높이 120px 상자의 네 모서리를 모두 100px로 설정하면 실제로 그릴 때는 각각 60px가 됩니다.
- 입력한 CSS 숫자가 유지되어도 화면에 그려지는 반경은 줄어들 수 있습니다.
- 한쪽의 큰 반경 때문에 다른 쪽의 작은 반경도 함께 줄어들 수 있습니다.
- 상자 높이를 바꿔 보면 반경이 더 이상 커지지 않는 지점을 비교할 수 있습니다.
둥근 모서리 안쪽 여백은 얼마나 두나요?
border-radius는 글자나 버튼 안쪽 여백을 늘려 주지 않습니다. 모서리를 크게 둥글렸다면 실제 문장을 넣고 padding을 별도로 조절하세요. 반경과 여백을 반드시 같은 숫자로 맞출 필요는 없습니다. 긴 한글 문장이 두 줄이 됐을 때 곡선 가까이에 붙는지가 더 유용한 확인 기준입니다.
- 버튼은 글자의 좌우가 둥근 끝부분에 닿지 않는지 봅니다.
- 카드는 제목뿐 아니라 본문 마지막 줄과 하단 버튼도 확인합니다.
- 테두리와 padding을 더한 전체 크기는 box-sizing 설정에 따라 달라질 수 있습니다.
카드 안의 이미지가 모서리 밖으로 나와요
부모 카드에 반경을 주는 것만으로 모든 자식 콘텐츠가 잘리지는 않습니다. 이미지 자체의 모서리를 둥글게 하거나, 콘텐츠를 감싸는 요소의 overflow로 잘라낼 범위를 정하세요. overflow: hidden;을 쓰면 넘치는 콘텐츠를 가릴 수 있지만 함께 잘리는 메뉴와 포커스 표시도 확인해야 합니다.
- 배경 이미지와 별도의 img 요소는 적용 대상을 구별합니다.
- 카드 밖으로 펼쳐지는 메뉴가 있다면 전체 카드의 overflow를 바꾸기 전에 구조를 확인합니다.
- 모서리 장식용 영역과 조작 버튼 영역을 따로 두면 잘림 범위를 좁힐 수 있습니다.
복사한 CSS는 어디에 적용하나요?
생성한 border-radius 선언을 원하는 요소의 CSS 규칙 안에 붙여 넣으세요. 사이트에서 모양이 다르면 실제 요소의 너비·높이와 적용된 CSS부터 확인합니다. 이 도구는 모서리마다 하나의 반경을 설정하며, 슬래시(/)로 가로·세로 반경을 따로 입력하는 고급 문법은 제공하지 않습니다.
- 다른 CSS 규칙이 border-radius나 개별 모서리 속성을 덮어쓰는지 확인합니다.
- 반경은 0~200 사이의 정수로 입력합니다. 빈칸이나 범위를 벗어난 값에서는 오류 안내가 나오고 미리보기·CSS·복사가 멈춥니다.
- rem, calc() 같은 값을 직접 입력하거나 기존 CSS를 해석하는 용도로는 사용할 수 없습니다.
- 미리보기의 크기와 사이트의 요소 크기가 다르면 특히 % 단위에서 모양이 달라집니다.
실제 페이지에 넣기 전 확인할 것
최종 모양은 실제 콘텐츠와 함께 확인하세요. 빈 상자에서 어울리는 반경도 짧은 버튼, 여러 줄 제목, 이미지가 들어간 카드에서는 다르게 보입니다. 미리보기는 네 모서리의 비교를 돕지만 사이트의 글꼴, 주변 배치, 자식 요소까지 그대로 재현하지는 않습니다.
- 모바일과 넓은 화면에서 카드 크기가 바뀌었을 때 모양을 확인합니다.
- 긴 제목과 버튼 문구를 넣어 안쪽 여백을 확인합니다.
- 이미지의 잘림과 메뉴·키보드 포커스 표시를 확인합니다.
- 선택한 단위와 네 모서리의 순서가 복사한 CSS에 맞는지 봅니다.
CSS 둥근 모서리 미리보기 자주 묻는 질문
네 모서리를 모두 같은 값으로 바꾸려면 어떻게 하나요?
연결 모드를 켜고 반경을 조절하면 네 모서리를 같은 값으로 바꿀 수 있습니다. 특정 모서리만 바꾸려면 연결을 해제하세요.
CSS 둥근 모서리 미리보기와 이미지 편집기는 무엇이 다른가요?
이 도구는 웹 요소에 적용할 border-radius CSS를 만듭니다. 사진 파일의 픽셀을 편집하거나 둥근 PNG 파일로 내보내는 이미지 편집기는 아닙니다.
border-radius: 20px 0;은 어느 모서리가 둥글어지나요?
첫 값은 왼쪽 위와 오른쪽 아래에, 둘째 값은 오른쪽 위와 왼쪽 아래에 적용됩니다. 따라서 왼쪽 위와 오른쪽 아래만 20px로 둥글어집니다.
50%를 쓰면 항상 원이 되나요?
아니요. 너비와 높이가 같은 정사각형에서 50%를 적용해야 원이 됩니다. 가로와 세로가 다른 상자에서는 타원이 됩니다.
알약 모양 버튼에는 50%와 9999px 중 무엇을 쓰나요?
가로로 긴 버튼에서 양 끝을 반원으로 만들려면 9999px처럼 충분히 큰 px 반경을 사용합니다. 같은 버튼에 50%를 적용하면 가로·세로 반경이 각각 너비·높이를 기준으로 계산되어 타원이 됩니다.
반경을 늘려도 미리보기 모양이 그대로인 이유는 무엇인가요?
인접한 모서리 반경의 합이 상자의 한 변보다 커지면 브라우저가 전체 반경을 비례해서 줄입니다. 입력값이 커져도 상자 크기에 맞춰 같은 모양으로 그려질 수 있습니다.
음수 반경이나 슬래시 문법도 설정할 수 있나요?
CSS 모서리 반경에 음수는 유효하지 않습니다. 이 도구는 px와 %의 음수가 아닌 반경을 다루며, 슬래시로 가로·세로 반경을 따로 지정하는 입력은 제공하지 않습니다.
부모 카드가 둥근데 안의 사진은 왜 각진가요?
부모 요소의 border-radius가 별도 이미지 요소의 모서리를 자동으로 바꾸지는 않습니다. 이미지에도 반경을 지정하거나 감싸는 영역의 overflow를 조절하고, 메뉴나 포커스 표시가 함께 잘리지 않는지 확인하세요.
생성한 CSS를 쓰는 페이지에도 JavaScript가 필요한가요?
모서리를 둥글게 표시하는 데 JavaScript는 필요하지 않습니다. 생성한 border-radius 선언을 해당 요소의 CSS에 적용하면 됩니다. 값 조절과 미리보기 갱신은 이 도구에서 사용하는 기능입니다.
CSS 문법과 사용 기준
반경의 순서·퍼센트 기준·겹침 조정은 CSS 명세와 MDN에서, 콘텐츠 잘림은 CSS Overflow 명세에서 확인했습니다. 확인일은 2026년 9월 27일입니다.
함께 쓰는 CSS 도구
모서리 값을 정했다면 배경색을 함께 비교하거나, 사이트에 붙여 넣을 CSS를 정리해 보세요. 다른 길이 단위가 필요할 때는 단위 변환기를 사용할 수 있습니다.