Border Radius 생성기

속성 순서

border-radius 속성은 시계 방향으로 적용됩니다: 왼쪽 상단 → 오른쪽 상단 → 오른쪽 하단 → 왼쪽 하단

단축 속성

• • border-radius: 10px; - 네 모서리에 모두 적용
• • border-radius: 10px 20px; - 첫 번째는 왼쪽 상단과 오른쪽 하단, 두 번째는 오른쪽 상단과 왼쪽 하단에 적용
• • border-radius: 10px 20px 30px; - 첫 번째는 왼쪽 상단, 두 번째는 오른쪽 상단과 왼쪽 하단, 세 번째는 오른쪽 하단에 적용
• • border-radius: 10px 20px 30px 40px; - 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 순서로 적용

사용 팁

• • 50%를 사용하면 완전한 원형이 됩니다
• • 버튼에는 보통 4-8px 정도가 적당합니다
• • 카드나 패널에는 8-16px 정도가 일반적입니다
• • 비대칭 radius로 독특한 디자인 효과를 만들 수 있습니다