CSS Border-Radius 생성기

실시간 미리보기와 복사 가능한 CSS 코드로 둥근 모서리를 시각적으로 조정하세요.

세로 반경:

px
px 
{{ cssOutput }}

border-radius란 무엇인가요?

CSS 속성 border-radius는 요소의 모서리를 둥글게 만듭니다. 네 모서리 모두에 균일한 반경을 설정하거나 각 모서리를 개별적으로 스타일링할 수 있습니다. 축약형은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서를 따릅니다.

타원형 Border Radius

확장 구문 border-radius: H1 H2 H3 H4 / V1 V2 V3 V4를 사용하면 각 모서리에 수평 및 수직 반경을 정의할 수 있습니다. 이를 통해 더 유기적인 형태를 만드는 타원형 곡선을 생성합니다.

일반적인 사용 사례

  • 원형: 정사각형 요소에 border-radius: 50% 적용.
  • 알약 형태: 둥근 버튼을 위한 border-radius: 9999px.
  • 카드: 모던한 카드 디자인을 위한 border-radius: 8px에서 16px.
  • Blob 형태: 유기적인 형태를 위한 서로 다른 수평 및 수직 반경.