Starlight Tools

Web CSS Tool

CSS Border Radius Generator & Preview

Shape every corner visually. Link equal corners, create elliptical radii with slash syntax, switch between pixels and percentages, then copy concise border-radius CSS.

Build rounded corners without shorthand guesswork

CSS can round all four corners equally, assign a different radius to every corner, or combine separate horizontal and vertical radii into elliptical curves. Adjust the shape below and the generator automatically produces the shortest equivalent shorthand.

Everything updates in your browser. The values you enter are not uploaded or stored.

Live preview

Preview shapeResize and round every corner

Runs locallyNo uploadsCopy-ready CSS

Generated CSS


          

            
            
            
            
          

          

        

      


      

        
Corner controls

        

          

          

            
            
          

        

        
Linked corners change together. Enable elliptical radii for separate horizontal and vertical values.

        

        

        
Preview appearance

        

          

          

          

          

          

          

        


        
Shape presets

        

      

    


    

      
How border-radius shorthand works

      
border-radius: top-left top-right bottom-right bottom-left / vertical-radii;

      

        
One to four values
One value applies to every corner. Two alternate between top-left/bottom-right and top-right/bottom-left. Three set top-left, the paired side corners, then bottom-right. Four move clockwise.

        
Elliptical slash syntax
The values before / are horizontal radii; those after it are vertical radii. Without a slash, each corner uses the same value on both axes.

        
Pixels and percentages
Pixel radii stay fixed. Percentage horizontal radii use the box width, while percentage vertical radii use its height, so 50% produces a circle or ellipse.

      

      
When adjacent curves would overlap, browsers proportionally reduce the used radii so the corners fit. Syntax reference: W3C CSS Backgrounds and Borders Module.

    


    

      
Useful border-radius patterns

      

        
Cards and controls
Use a restrained fixed radius such as 8px or 12px to keep corners consistent across differently sized components.

        
Pills and avatars
Use a very large radius for pills, or 50% for circles and ellipses. A true circle also needs equal width and height.

        
Organic shapes
Unlink the corners and enable elliptical radii. Uneven horizontal and vertical percentages can create leaves, blobs, and asymmetric image masks.

      

    


    

      
CSS border radius FAQ

      
What order do the four corner values use?
They move clockwise: top-left, top-right, bottom-right, then bottom-left.

      
What does the slash mean in border-radius?
The first group sets horizontal radii and the group after the slash sets vertical radii. Together they form elliptical corners.

      
Should I use pixels or percentages?
Use pixels for consistent component corners. Use percentages when the curve should respond to the element’s dimensions, especially for circles, ellipses, and organic shapes.

      
How do I make a circle?
Set equal width and height, then use border-radius: 50%. If the dimensions differ, the result is an ellipse.

      
Can a radius be larger than the box?
Yes. CSS scales overlapping curves down to fit. A large value such as 9999px is therefore a common way to keep a rectangular control pill-shaped.

      
Are my values uploaded or saved?
No. This tool runs entirely in your browser and does not upload or store your settings.

    


      

        
Explore more tools