Border Radius 생성기

처음부터 결과 확인까지

1. 1

   px, rem, % 중 출력 단위를 선택합니다.

2. 2

   전체 연결을 켜면 어느 모서리를 조정해도 네 모서리가 함께 바뀝니다. 끄면 모서리를 개별 조정할 수 있습니다.

3. 3

   미리보기는 고정된 크기와 배경을 사용합니다. 실제 컴포넌트의 크기와 배경에서는 별도로 확인합니다.

4. 4

   왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 결과를 확인합니다.

5. 5

   CSS를 한 번 생성하면 이후 값 변경도 출력에 반영됩니다. 코드를 복사하거나 CSS 파일로 저장합니다.

6. 6

   실제 콘텐츠가 들어간 화면과 작은 화면에서 테두리·배경 잘림을 다시 확인합니다.

계산·처리 기준

입력한 네 모서리 값을 CSS 축약형 순서로 조합합니다. px는 고정 길이이고 %는 각 모서리의 가로 반지름이 박스 너비, 세로 반지름이 박스 높이를 기준으로 계산되므로 정사각형이 아닌 요소에서는 원과 다른 곡선이 보일 수 있습니다. px와 rem 모드의 조절값 범위는 0~120, %는 0~50입니다. rem은 조절값을 16으로 나누고 소수 둘째 자리로 반올림합니다. 모든 모서리가 같으면 한 값으로, 다르면 네 값과 개별 속성 예제로 출력합니다.

알아둘 한계

• 가로·세로 반지름을 슬래시로 구분하는 타원형 고급 문법은 생성하지 않습니다.
• 백분율 결과는 요소의 실제 너비와 높이에 따라 달라집니다.
• 자식 콘텐츠와 이미지의 잘림 여부는 overflow 설정에 따라 달라집니다.
• 디자인 시스템의 토큰 이름이나 브라우저별 시각 차이를 자동으로 검증하지 않습니다.
• % 단위 전환은 숫자를 이어받아 50 이하로 제한할 뿐 요소 크기에 따른 px→% 환산은 아닙니다.
• rem 반올림으로 작은 반경에 오차가 생길 수 있으며 실제 루트 글꼴에 따라 크기가 달라집니다.