Start with one shared radius for a consistent component language.
로컬 CSS border-radius 생성기
실시간 미리보기로 CSS 모서리를 만드세요
각 모서리를 독립적으로 조정하고 카드에서 결과를 확인한 뒤 border-radius CSS를 복사하세요.
* 모든 처리는 브라우저에서 진행됩니다. 도형 데이터는 업로드되지 않습니다.
CSS 준비 완료
border-radius: 16px 40px 16px 40px;실시간 미리보기
QUICK GUIDE
의도적으로 둥근 모서리 만들기
Use independent corners when a card needs a directional shape or asymmetrical emphasis.
Keep radii within the component dimensions so curves do not collapse into unexpected shapes.
Paste the shorthand into the element and use overflow: hidden when its children must follow the curve.
FAQ
Border-radius questions
What order does border-radius use?
Four values apply clockwise: top-left, top-right, bottom-right, then bottom-left.
Can I make a circle?
Yes. Set a radius at least half the element's width and height, or use border-radius: 50% for a responsive circle.
Does RadiusBox support percentages?
It currently generates predictable pixel values. Use percentages manually when the element size is fluid.