분류: 개발 도구
CSS border-radius 생성기
모서리를 하나씩 둥글게, 실시간 미리보기
모서리마다 슬라이더를 움직여 border-radius 선언을 복사하세요. 타원형 모서리를 켜면 유기적인 형태를 만드는 슬래시 문법이 나옵니다.
출력
border-radius: 12px;
미리보기는 생성된 값을 실제로 적용한 요소이므로 브라우저가 그리는 그대로 보입니다.
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
border-radius는 세 모서리를 다르게 하고 싶어지기 전까지는 숫자 하나처럼 보이지만, 그때 축약 표기가 사람을 헷갈리게 합니다. 네 값은 왼쪽 위에서 시계 방향으로 돌고, 슬래시 형태는 슬래시 앞이 각 모서리의 수평 반지름, 뒤가 수직 반지름입니다. 둥근 상자가 아니라 유기적으로 읽히는 부드럽고 비대칭인 실루엣을 그리는 것이 바로 이 두 번째 형태입니다. 여기에는 모서리마다 슬라이더가 있고, 그림이 아니라 값을 실제로 적용한 요소가 있으며, 출력은 사람이 쓰듯 압축됩니다. 네 모서리가 같으면 값은 넷이 아니라 하나가 됩니다.
사용 방법
- 단위를 고르고, 모서리를 다르게 하려면 연동을 해제합니다.
- 미리보기가 마음에 들 때까지 각 모서리를 조절합니다.
- 유기적인 형태가 필요하면 타원형 모서리를 켜고 선언을 복사합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 값 안의 슬래시는 무슨 뜻인가요?
- 슬래시 앞은 각 모서리의 수평 반지름, 뒤는 수직 반지름입니다. 양쪽 값이 다르면 사분원이 아니라 타원이 됩니다.
- 퍼센트와 픽셀 중 무엇을 쓸까요?
- 픽셀은 크기가 달라져도 같은 곡률을 유지해 버튼과 카드에 알맞습니다. 퍼센트는 요소에 따라 커지므로 정사각형에 50퍼센트를 주면 원이 됩니다.
- 출력이 네 값보다 짧은 이유는 무엇인가요?
- CSS는 반복되는 모서리를 묶고, 이 도구도 같습니다. 네 모서리가 같으면 값 하나, 대각선이 같으면 둘입니다. 결과는 같고 표기만 짧습니다.