작업 경로 / 입력에서 결과까지
CSS 모서리 둥글기를 만드는 방법
- 01
단위 선택하기
「단위」를 「픽셀」 또는 「퍼센트」로 설정하세요. 작업 공간은 픽셀로 시작합니다. 픽셀은 요소 크기와 관계없이 일정하고, 퍼센트는 요소에 따라 스케일됩니다. 이 상대성이 유기적이고 비대칭적인 모양을 가능하게 합니다.
- 02
네 모서리 조정하기
「왼쪽 위」「오른쪽 위」「오른쪽 아래」「왼쪽 아래」를 움직이세요. 각각 선택한 단위로 0~100까지 1 단위로 지정할 수 있습니다. 네 곳 모두 24 px에서 시작하고, 미리보기 카드는 변경할 때마다 다시 그려져요.
- 03
모서리 연동 또는 해제하기
「모든 모서리 연동」을 켜 두면 네 모서리를 한꺼번에 바꿀 수 있고, 끄면 각 모서리를 독립적으로 다듬을 수 있습니다. 토글 옆에 적혀 있듯이, 연동 중에는 하나의 모서리를 바꾸면 네 곳 모두 업데이트됩니다.
- 04
샘플 모양 사용해 보기
「샘플 불러오기」를 누륩면 비대칭 참고 예시(왼쪽 위와 오른쪽 아래가 64 px, 오른쪽 위와 왼쪽 아래가 12 px, 연동 해제)가 채워져요. 카드와 아바타에서 쓰는 대각선 잎 모양입니다. 「초기화」는 균일한 24 px 기본값으로 되돌려요.
- 05
생성된 선언 확인하기
출력은 항상 시계 방향으로 네 값(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래)을 나열하므로, 붙여 넣어도 각 모서리가 명확하게 유지됩니다. 상태 배지는 「유효한 CSS」로 표시되고, 범위를 벗어난 모서리가 있으면 「값 확인」으로 바뀌어 복사가 차단됩니다.
- 06
CSS 복사 또는 다운로드하기
「CSS 복사」를 눌러 .rounded-card 규칙을 네 값 border-radius 선언으로 복사하거나, 「.css 다운로드」를 눌러 toolars-border-radius.css로 저장하세요. 같은 선언은 이미지, 버튼, 카드 등 어떤 요소에도 적용됩니다.