CSS Border Radius Generator

Visually generate CSS border-radius with live preview, per-corner sliders, a link-all toggle, and px or percent units.


  

  

    
    
  



    

    

      
Round the corners of any element visually with this free CSS border-radius generator. Drag a slider for all four corners at once, or unlink them to round each corner independently, switch between pixels and percent, and watch the live preview update instantly. When it looks right, copy a clean border-radius rule — everything runs in your browser with nothing to install.

      

        
What is a CSS border-radius generator?

        
A CSS border-radius generator is a visual tool that builds the border-radius property for you. Instead of guessing values, you drag sliders for each corner and watch a live preview, then copy the exact border-radius CSS to paste into your stylesheet. It collapses to the short one-value form when every corner is the same and writes the four-value shorthand when they differ.

        
      

      

        
How to generate a border-radius

        
Keep corners linked for a uniform radius, or unlink to shape each corner on its own. Choose pixels or percent, and copy the generated rule when the preview looks right.

        
  1. Leave Link all corners on to round every corner by the same amount.
  2. Drag a corner slider to set the radius and see the preview update.
  3. Unlink the corners to round each one independently.
  4. Switch the unit between px and % to change how the radius scales.
  5. Click Copy CSS to grab the ready-to-paste border-radius rule.

      

      

        
Why use this border-radius generator?

        
  • Live preview updates instantly as you adjust each corner.
  • Link all corners for a uniform radius or unlink for full control.
  • Switch between px and % units in one click.
  • Outputs the short form when corners match and shorthand when they differ.
  • One click copies a clean, ready-to-paste border-radius rule.
  • 100% free and private — everything runs in your browser.

      

      

        
Frequently asked questions

        

          
What order are the four border-radius values in?

          
The four-value shorthand lists the corners clockwise starting from the top-left: border-radius: top-left top-right bottom-right bottom-left. When all four are equal you can use a single value, like border-radius: 12px.

        

        

          
Should I use px or percent for border-radius?

          
Pixels give a fixed corner radius that stays the same no matter the element size. Percent is relative to the element's dimensions, so 50% on a square turns it into a circle and is great for fluid, responsive rounding.

        

        

          
How do I make a perfect circle or pill shape?

          
Set border-radius to 50% on an element with equal width and height to get a circle. For a pill or capsule shape on a wider element, use a large value like 9999px so the short sides are fully rounded.

        

        

          
Can I round only some corners?

          
Yes. Turn off Link all corners and set each corner independently. A corner with a radius of 0 stays square, so you can round just the top corners of a card, for example.