CSS 테두리 반경 생성기

CSS border-radius 속성을 시각적으로 생성하세요. 각 꼭짓점을 개별 제어하고, 모양, 크기, 색상을 커스터마이즈하여 바로 사용 가능한 CSS 코드를 복사하세요.

16px
#ffffff
#4f46e5
border-radius: 16px;
모든 border-radius 생성은 브라우저에서 처리됩니다. 어떤 데이터도 서버로 전송되지 않습니다.

How to Use This Tool

  1. 1

    Adjust border radius

    Use the slider to set the border-radius value for all corners at once, or unlink corners for individual control.

  2. 2

    Try presets

    Use preset buttons like Rounded, Pill, Circle, Leaf, or Drop to start with common shapes.

  3. 3

    Customize appearance

    Change the box size, colors, border width, and CSS unit (px, %, rem, em) to match your design.

  4. 4

    Copy the CSS

    Click "Copy" to copy the generated border-radius CSS property to your clipboard.

Frequently Asked Questions

What is CSS border-radius?
CSS border-radius rounds the corners of an element. You can set all four corners uniformly or each corner individually using shorthand values.
What units can I use?
You can use px (pixels), % (percentage), rem (root em), or em. Percentage values are relative to the element dimensions—50% creates a circle on a square element.
How do I make a perfect circle?
Set border-radius to 50% on a square element (equal width and height). The "Circle" preset does this automatically.
Is my data secure?
Yes. All generation happens entirely in your browser using JavaScript. No data is sent to any server.