Border Radius 생성기
CSS border-radius 속성을 시각적으로 생성하고 미리보기할 수 있습니다.
생성된 CSS
각 모서리의 둥글기를 조정하세요
미리보기
생성된 border-radius 효과를 확인하세요
미리보기
생성된 CSS
border-radius: 20px;다양한 예제
미리 정의된 border-radius 스타일을 클릭하여 적용해보세요
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로 독특한 디자인 효과를 만들 수 있습니다