Skip to content

Premium CSS Studio · free · no sign-up

CSS Border Radius Generator

Create rounded corners and organic blob shapes with a visual CSS border-radius editor.

How it works Report a problem

Border Radius Generator

Create organic and perfectly rounded shapes

Shape Master
Live Shape Preview 

                

            

        

    






                

            


                            

                                            

            
About the CSS Border Radius Generator

        
Create rounded corners and organic blob shapes with a visual CSS border-radius editor.

    
            
How to use the CSS Border Radius Generator

        
    
                            
  1. Pick a shape preset such as Perfect Circle, Organic Blob, Egg Shape, Pill Shape or Leaf Style, or adjust the horizontal and vertical sliders for each corner.
    2. 
                            
  2. Press Generate Border Radius.
    3. 
                            
  3. Click Copy CSS.
    4. 
                    

    
            
Formula and method

        
The CSS is written as border-radius: horizontal radii / vertical radii, for example 30% 70% 70% 30% / 30% 30% 70% 70%.

    
    
    
    
    
            
Tips

        
    
                            
  • 50% on a square element makes a perfect circle.
    • 
                            
  • A very large value such as 9999px gives a pill shape.
    • 
                    

    

                    
                                            

                            

                                
Frequently asked questions

                                                            

                                                            

                                    How do I make a circle?
                                    
Use a square element with border-radius: 50%.