CSS Border Radius 생성기

기능

네 모서리 개별 조절

일괄/개별 모드

슬라이더와 숫자 입력 지원

미리보기와 CSS 코드 동시 제공

사용 방법

1. 반경 슬라이더를 드래그하면 스테이지의 카드가 실제 크기로 모서리를 미리 보여줍니다.

2. 「모서리별」로 전환하면 각 모서리를 따로 조정할 수 있습니다.

3. CSS를 복사하세요 — 가장 짧은 표기법으로 출력됩니다.

이 도구에 대하여

둥근 모서리는 CSS 한 줄이면 되지만, 실제 모습을 보면서 고르면 알맞은 값을 찾기가 더 쉽습니다. 이 생성기는 중립적인 카드에서 border-radius를 실제 크기로 미리 보여 주며, 슬라이더 하나로 한꺼번에 조정하거나 모서리마다 따로 조정할 수 있습니다. 그리고 가장 짧은 유효 선언을 작성합니다. 네 모서리가 같으면 값 하나, 다르면 왼쪽 위·오른쪽 위·오른쪽 아래·왼쪽 아래 순서로 값 두세 개나 네 개를 씁니다. 4–8px의 작은 둥글기는 버튼과 입력란에, 12–24px은 카드에 쓰면 친근해 보이며, 아주 큰 값은 낮은 요소를 알약 모양으로 만듭니다. CSS를 복사하기 전에 무대 배경을 바꿔 밝은 면과 어두운 면에서 모양이 어떻게 보이는지 확인할 수 있습니다.

자주 묻는 질문

border-radius 네 값의 순서는 어떻게 되나요?

왼쪽 위 모서리부터 시계 방향으로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서입니다. 값이 두 개라면 첫 번째는 왼쪽 위와 오른쪽 아래, 두 번째는 오른쪽 위와 왼쪽 아래에 적용됩니다.

알약 모양 버튼이나 원은 어떻게 만드나요?

알약 모양은 둥글기를 요소 높이의 절반 이상으로 하거나 9999px처럼 아주 큰 값을 주면 됩니다. 원은 요소의 너비와 높이를 같게 하고 border-radius를 50%로 설정하세요.

둥근 모서리가 잘리거나 배경이 비쳐 보이는 이유는 무엇인가요?

자식 요소가 둥근 모서리 밖으로 넘칠 수 있습니다. 컨테이너에 overflow: hidden을 주거나 자식에도 같은 둥글기를 지정하면 이미지와 배경이 곡선을 따라 표시됩니다.

타원형 모서리도 만들 수 있나요?

CSS에서는 border-radius: 50% / 20%처럼 슬래시로 가로와 세로 반지름을 따로 지정할 수 있습니다. 이 생성기는 대부분의 인터페이스 작업을 다루는 픽셀 단위의 원형 모서리에 집중하므로, 특별한 모양은 슬래시 문법을 직접 추가하세요.

border-radius가 레이아웃이나 클릭 영역에 영향을 주나요?

주지 않습니다. 요소가 그려지고 잘리는 방식만 바뀔 뿐, 레이아웃에서는 여전히 사각형 상자이고 투명해진 모서리를 클릭해도 그 요소가 클릭됩니다.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구