Border Radius 생성기

슬라이더로 각 모서리를 둥글게 깎고, 타원형 모드로 유기적인 물방울 모양을 디자인하여 CSS를 즉시 복사해 보세요.

프리셋
모서리 설정
모든 모서리
24px
CSS
슬라이더를 드래그하여 모서리를 둥글게 만들어 보세요.

모든 모서리는 브라우저에서 직접 렌더링됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.

자주 묻는 질문

네 모서리와 px 및 % 단위는 어떻게 작동하나요?

4개의 슬라이더는 시계 방향으로 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리에 대응합니다. 픽셀(px) 단위에서는 모서리가 고정된 크기만큼 둥글게 처리되며, 백분율(%) 단위에서는 박스 크기에 비례하여 처리됩니다. 가로 백분율은 너비를, 세로 백분율은 높이를 따르므로 50%로 설정하면 정사각형이 원형이 됩니다.

타원형(elliptical) 모드는 어떤 역할을 하나요?

이 모드를 끄면 모든 모서리가 단일 반지름을 가진 1/4 원이 됩니다. 모드를 켜면 각 모서리에 가로 및 세로 반지름이 개별적으로 부여되어 부드럽고 유기적인 '물방울(blob)' 모양을 만들 수 있습니다. 생성기가 슬래시(/)로 구분된 두 개의 값 형태를 자동으로 작성하며, 모서리가 다시 원형으로 돌아가면 짧은 형태로 복원됩니다.

완벽한 원형이나 알약 모양은 어떻게 만드나요?

모든 모서리를 연결하고 단위를 백분율(%)로 전환한 뒤 50%로 설정하면 정사각형이 원형이 됩니다. 알약 모양의 버튼을 만들려면 픽셀(px) 단위를 유지한 채 모서리 하나를 버튼 높이의 절반 이상으로 드래그하세요. 그러면 너비가 아무리 넓어져도 양옆이 완전히 둥글게 유지됩니다. '원형' 프리셋을 클릭하면 첫 번째 케이스가 한 번에 설정됩니다.

CSS Cubic Bezier 생성기두 핸들을 드래그하여 이징 곡선을 만들고, 등속 운동과 비교하는 실시간 애니메이션을 확인한 뒤 cubic-bezier() 값을 복사해 보세요.Box Shadow 생성기슬라이더를 드래그하여 박스 그림자를 만들고, 레이어를 쌓아 깊이감을 더한 뒤 완성된 CSS를 즉시 복사해 보세요.그라데이션 생성기선형, 방사형 또는 원추형 그라데이션을 만들고, 색상 중단점을 추가하고 방향을 설정하여 클릭 한 번으로 CSS를 복사해 보세요.Flexbox 생성기시각적 컨트롤러로 flex 컨테이너와 아이템을 구성하고, 실시간으로 반응하는 레이아웃을 확인한 뒤 클릭 한 번으로 CSS를 복사해 보세요.CSS Grid 생성기열과 행을 설정하고, 셀 위를 드래그하여 아이템을 배치한 뒤, 클릭 한 번으로 그리드 CSS와 매칭되는 HTML 코드를 복사해 보세요.CSS clamp() 계산기소형 및 대형 화면에서의 크기를 입력하면 그 사이에서 부드럽게 변하는 유동적인 clamp() 값을 생성해 줍니다. 글자 크기, 패딩, 마진, 갭 등에 활용해 보세요.색상 변환기HEX, RGB, HSL, HSV, CMYK, LAB 간 색상 변환 — 한 필드를 수정하면 나머지도 실시간으로 자동 업데이트됩니다.