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.