Border Radius Generator

시각적으로 맞춤 둥근 모서리를 디자인해보세요. 각 모서리를 조정하고, 단위를 선택하고, CSS를 복사해요. 모든 작업이 브라우저에서 이루어져요.

작동 방식: 슬라이더를 사용하여 각 모서리 반경을 조정하거나 직접 값을 입력할 수 있어요. 모서리를 연결하여 한 번에 모두 변경하거나, 연결을 해제하여 개별 제어를 할 수 있어요. 단위를 선택하고, 모양을 미리보고, CSS를 복사하세요. 어떤 데이터도 서버로 전송되지 않아요.

160px
px
px
px
px
border-radius: 12px;

border-radius란 뭘까요?

CSS border-radius 속성은 요소의 테두리 상자 모서리를 둥글게 만들어요. 이것은 현대 UI 디자인에서 가장 널리 사용되는 CSS 속성 중 하나로, 날카로운 직사각형 요소를 더 부드럽고 친화적인 모양으로 변환해요. 네 모서리 모두에 같은 반경을 적용하거나 각 모서리를 독립적으로 제어할 수 있어요. Border-radius는 픽셀, 퍼센트, em, 그리고 다른 CSS 길이 단위의 값을 받으므로 모든 모서리의 곡률을 정확히 제어할 수 있어요.

Border Radius 문법

border-radius 단축형은 하나에서 네 개의 값을 받아요. 하나의 값은 모든 모서리에 같은 반경을 적용해요. 두 개의 값은 각각 왼쪽 위/오른쪽 아래와 오른쪽 위/왼쪽 아래를 설정해요. 세 개의 값은 왼쪽 위, 오른쪽 위/왼쪽 아래, 오른쪽 아래를 설정해요. 네 개의 값은 왼쪽 위부터 시계 방향으로 각 모서리를 설정해요. 타원형 모서리의 경우 슬래시 표기법(예: border-radius: 50px / 30px)을 사용하세요. 첫 번째 집합은 수평 반경을 정의하고 두 번째 집합은 수직 반경을 정의해요. 이 8값 문법은 간단한 둥근 모서리를 훨씬 능가하는 유기적이고 비대칭적인 모양을 만들 수 있어요.

border-radius로 창의적인 모양 만들기

Border-radius는 미묘한 모서리 반올림보다 훨씬 더 많은 일을 할 수 있어요. 정사각형 요소에 border-radius를 50%로 설정하면 완벽한 원이 만들어져요. 직사각형에 적용하면 약환 모양이나 캡슐 모양이 만들어져요. 각 모서리에 다른 값을 사용하면 잎 모양, 유기적인 얼룩, 유동적인 비대칭 형태를 만들 수 있어요. Border-radius를 background gradients, box-shadow, transforms과 결합하면 말풍선, 물방울, 추상 장식 요소 같은 창의적인 가능성이 열려요. 모두 이미지 없이 순수 CSS로만 만들 수 있어요.

Border Radius 팁

  • % 값을 사용하면 요소 크기에 따라 스케일링되는 반응형 모서리를 만들 수 있어요
  • 정사각형에 border-radius: 50%를 설정하면 완벽한 원을 만들 수 있어요
  • 크기와 상관없이 약환 모양 버튼을 만들려면 9999px를 사용하세요
  • 각 모서리마다 다른 값을 조합하면 유기적인 잎 모양과 얼룩 모양을 만들 수 있어요
  • 타원형 반경(슬래시 표기법)은 더 자연스러운 곡선을 만들어요
  • Border-radius는 이미지, 비디오, 모든 블록 요소에 작동해요
  • 브라우저 DevTools로 값을 시각적으로 미세 조정하면서 검사해보세요