DevToolKit

CSS Border Radius Generator

Create advanced 8-point CSS border radii visually. Design circles, pills, organic blobs, and fancy shapes with live previews and instant CSS code export.

Live Visualization
Preview

Radius Controls

X-Axis Radii
50%
50%
50%
50%
Y-Axis Radii
50%
50%
50%
50%

Generated CSS

border-radius: 50% 50% 50% 50%;

The 8-value syntax allows for independent horizontal and vertical radii for each corner. Format:tl-x tr-x br-x bl-x / tl-y tr-y br-y bl-y. This is perfect for creating organic, non-symmetrical shapes like blobs.
Was this tool helpful?

How to Use

Designing complex rounded shapes is made intuitive with our 8-point controller:

How to use

  1. Select a Preset: Use quick buttons like Blob or Leaf to instantly load complex geometry.
  2. Adjust X-Axis: Move the first 4 sliders to change the horizontal curve of each corner.
  3. Adjust Y-Axis: Move the bottom 4 sliders to change the vertical curve independently.
  4. Scale Preview: Use the + and - buttons to resize the visualization box.
  5. Copy CSS: Click Copy Property to get the generated code for your project.

About This Tool

Advanced CSS Radii

Most developers only scratch the surface of what border-radius can do. By separating the horizontal and vertical components of each corner, you can create organic, asymmetrical shapes that feel more hand-crafted than standard digital rectangles.

This tool simplifies that complexity into 8 easy-to-understand sliders, providing instant visual feedback as you sculpt your elements.

FAQ

What is the 8-value border-radius syntax?
The 8-value syntax (e.g., 30% 70% 30% 70% / 60% 40% 60% 40%) allows you to specify horizontal and vertical radii independently for each of the four corners. This is what enables the creation of complex, non-symmetrical 'blob' shapes.
How do I use the generated code?
Simply copy the generated 'border-radius' property and paste it into your CSS rule for the desired HTML element. The tool provides the modern, cross-browser compatible syntax.
Can I create a perfect circle?
Yes. Set all 8 values to 50% on a square element (where width and height are equal) to create a perfect circle. You can also use the 'Circle' preset button.
Does this support pixels instead of percentages?
Currently, this tool focuses on percentage-based radii as they are more common for responsive organic shapes. Pixel-based support is planned for a future update.
NavigateOpenEscClose