Micro Tools
Advertisement

Border Radius Generator

Design CSS border radius with sliders instead of guesswork. Shape the preview box, toggle elliptical corners, and copy production-ready CSS. Free, instant, no sign-up.

Corner controls

Drag the sliders and watch the preview update.

Preview and code



        

      


      
      
Advertisement


      

        

          
How it works

          
Each slider sets one corner's radius in pixels or percent. Tick elliptical corners to control the horizontal and vertical radius of each corner separately, which is how you get organic blob shapes instead of plain rounded rectangles.
The preview updates live and the code box always shows the exact border-radius shorthand to paste into your stylesheet.

        

        

          
Reading the shorthand

          
Four values map to corners clockwise from top-left: border-radius: 24px 8px 24px 8px. With the slash form, values before the slash are horizontal radii and values after are vertical: 24px 8px / 12px 40px.
Percent values are relative to the box: 50% on all corners makes a perfect pill or circle.

        

      


      

        
Related tools

        

          JSON formatterFormat and validate JSON, privately.
          Regex testerTest regex live with highlighting.
          Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.
        

      


      

        
Radius Generator FAQs

        

          How do I make a perfect circle with border-radius?
          
Set all four corners to 50% on a square element. For a pill button on a rectangle, 50% works too, or use a large pixel value like 999px.

        

        

          What are elliptical corners?
          
Normal corners use one radius for a circular arc. Elliptical corners use separate horizontal and vertical radii, written with a slash, producing stretched, organic curves.

        

        

          Why does my percentage radius look uneven?
          
Horizontal percentages resolve against the width and vertical against the height, so on a non-square box 50% is an ellipse, not a circle. That is correct CSS behavior.

        

        

          Do I need vendor prefixes for border-radius?
          
No. Plain border-radius has been supported unprefixed in every modern browser for over a decade. The generated code is production-ready as is.

        

        

          Can I copy the CSS?
          
Yes, press Copy CSS and the exact border-radius declaration goes to your clipboard, ready to paste into your stylesheet.

        

      


      
      
Advertisement