CSS Border Radius Generator

Round every corner, or bend them into a blob.

24
24
24
24

Adds a second set of radii after a slash, so each corner curves by a different amount horizontally and vertically. This is how blob shapes are made.

40
40
40
40

The fill is only here so the shape is easy to read. Just the radius goes into the CSS.

Preview
Your CSS 

                

                

                    
                    
                    
                    
                    
                

            

        

    

    





    

        
About the CSS Border Radius Generator


        
What is a border-radius generator?

        
Rounding one corner is easy. Rounding four differently, in percentages, with a second set of values after a slash, is where border-radius stops being obvious. This tool puts a slider on every value and draws the result immediately, so you can see what the shorthand is actually doing instead of reading the spec.

        
The part worth knowing is the slash. Everything before it sets how far each corner curves horizontally, everything after sets how far it curves vertically. When those two numbers differ the corner becomes part of an ellipse rather than a circle, and once all four corners disagree you get the soft organic shapes people call blobs. Turn on Elliptical corners and the second row of sliders appears.


        
How to Use This Tool

        
    
            
  1. Try a preset. Soft, Rounded and Pill cover buttons and cards. Circle, Leaf and Blob are the shape tricks.
    2. 
            
  2. Pick a unit. Pixels stay the same at any size. Percent scales with the element, which is what makes a circle stay a circle.
    3. 
            
  3. Split the corners. Turn off Same on every corner to control each one, in clockwise order from the top left.
    4. 
            
  4. Go elliptical. Turn it on for the second set of radii and drag them out of step with the first for a blob.
    5. 
            
  5. Copy it. CSS, an SCSS mixin, a Tailwind class or a JS style object.
    6. 
        


        
Common Use Cases

        
Corner radius does more work than it gets credit for. It is most of what makes an interface feel soft or sharp.

        
    
            
  • Buttons and cards: A small consistent radius across a design is one of the cheapest ways to make it look considered.
    • 
            
  • Pill shapes: A very large pixel radius gets clamped to a half-round end, so one value works at any height.
    • 
            
  • Avatars: 50% turns any square into a circle and any rectangle into an ellipse.
    • 
            
  • Chat bubbles: Three rounded corners and one square one points the bubble at its speaker.
    • 
            
  • Organic blobs: Elliptical corners in percentages give the soft shapes used behind hero images and illustrations.
    • 
        

        
Next on the box, the CSS Box Shadow Generator lifts it off the page and the CSS Clip Path Generator cuts shapes a radius can't. Or browse all our free developer tools.


        
Frequently Asked Questions


        
What order do the four values go in?

        
Clockwise from the top left, so top left, then top right, then bottom right, then bottom left. It's the same order as margin and padding, just starting from a corner instead of an edge. If you give fewer than four values the missing ones mirror across, so two values set the two diagonal pairs.


        
When should I use percent instead of pixels?

        
Use percent when the curve should scale with the element, and pixels when it should not. A 50% radius makes a circle out of a square at any size, which is why avatars use it. A 12px radius stays 12px whether the card is small or huge, which is usually what you want for a design system, since a percentage radius on a wide card produces a very stretched curve.


        
What does the slash do?

        
It separates horizontal radii from vertical ones. Written out, border-radius: 60px 40px 30px 70px / 30px 50px 70px 50px means the top left corner extends 60px sideways but only 30px down, so the curve is an ellipse rather than a quarter circle. Without a slash, both directions use the same number and every corner is a quarter circle.


        
Why does my radius stop growing?

        
Because the browser clamps it. If the radii along one edge add up to more than the length of that edge, all of them are scaled down proportionally so the curves cannot overlap. That's why an enormous pixel value on a short button just gives you a pill rather than something strange, and it's a handy trick. Set the radius to a number far larger than the element and you'll get a pill shape at any height.


        
How do I make a blob?

        
Turn on Elliptical corners, switch the unit to percent, and drag the eight sliders so the horizontal and vertical values disagree on every corner. The Blob preset is a starting point. Percentages matter here because they keep the shape proportional when the element resizes, which is what makes blobs work as responsive background shapes.


        
Does border-radius clip the content inside?

        
It clips backgrounds and borders, but not necessarily child elements. An image or a video inside a rounded box will keep its square corners poking out unless the parent also has overflow: hidden, or the child gets the same radius. This is the single most common reason a rounded card looks wrong in a real page and fine in a generator.