Lite Tools

Border Radius Generator

Round corners with per corner sliders, blob mode and copyable CSS

Mode

Blob mode splits each corner into a horizontal and a vertical radius, matching the eight value syntax border-radius: a b c d / e f g h.

Presets

The preview box is a 160 pixel square, so the circle preset means 80 pixels per corner. Rescale for other sizes or just write 50%.

Corner radii
Live preview
CSS code

  






  
How to use

  
    
    
  1. The simple mode starts selected. Each slider drives one corner: top left, top right, bottom right, bottom left.
    2. 
    
  2. Switch to blob mode for eight sliders, a horizontal and a vertical radius per corner.
    3. 
    
  3. Five presets cover the rounded card, circle, drop, leaf and organic shapes. Pick one and fine tune from there.
    4. 
    
  4. The preview box mirrors every change, so keep dragging until the shape fits.
    5. 
    
  5. Copy the standard border radius rule and paste it into your stylesheet.
    6. 
  






  
Syntax and behavior

  

    What is the eight value syntax?
    
Before the slash sit four horizontal radii, after it four vertical radii, both clockwise from the top left. Unequal pairs create elliptical arcs, which is how petals and organic shapes are made.

  

  

    What happens when neighboring corners overlap?
    
When the radii of two adjacent corners sum past the side length, the browser scales every radius down by the same factor. The shape survives, but it can differ from your plan, so watch the side length.

  

  

    How do pixels differ from percentages?
    
Pixels stay fixed while percentages resolve against the element's own width and height. Responsive shapes like circles and pills favor percentages, decorative shapes favor pixels for control.

  

  

    Does border radius clip images?
    
Yes, together with overflow hidden. The rounded region clips backgrounds and overflowing content, so a container with hidden overflow crops avatars and covers to the shape.

  






  
Common questions

  

    Why is the preview a 160 pixel square?
    
A square shows all four corners at once. Rescale proportionally for your own element, for example by multiplying with its side divided by 160, or write 50% directly for circles.

  

  

    Are the parameters saved?
    
Yes. The mode and every slider value write to this browser automatically, and the next visit resumes the last shape. Clearing site data removes them.

  

  

    Does border radius affect layout?
    
No. It changes only the painted shape, never the box size or the layout, so neighbors stay put and transitions cause no reflow.

  

  

    Does the generated code work everywhere?
    
Yes. The four value and eight value forms are both part of the CSS standard, every modern browser supports them, and no prefixes are needed.

  




          
Screenshots
Border Radius Generator · Interface
Interface
Border Radius Generator · Example result
Example result

          

    
How to use
  1. Drag the corner sliders
    Four sliders control top left, top right, bottom right and bottom left. The preview box follows every move in real time.
  2. Switch to blob mode
    Blob mode splits each corner into horizontal and vertical radii, eight sliders in total. It matches the eight value syntax for petals and organic shapes.
  3. Start from a preset
    Rounded card, circle, drop, leaf and blob cover the common shapes. Pick the closest one and fine tune from there.
  4. Copy the CSS
    The output switches format with the mode and builds a standard border radius rule. Copy it and paste into your stylesheet.

    
About this tool
The border radius shorthand lists four values clockwise from the top left corner. The eight value form splits each corner into a horizontal and a vertical radius with a slash between the two groups. Unequal pairs turn every corner into an elliptical arc. Petals, drops and organic shapes all come from that form. The browser guards against overlap. When neighboring radii sum past the side length, it scales all radii down by one factor. The shape survives, though it may differ from the plan. Rounded areas also clip backgrounds and overflowing content, which makes border radius plus overflow hidden the standard way to crop avatars and covers.
This tool offers four sliders in simple mode and eight in blob mode. The preview is a 160 pixel square, and the output switches format with the mode. Five presets cover the common shapes and stay editable after selection, while the mode and all values persist on this device for the next visit. The generated values are pixels, so rescale them proportionally for other element sizes. A perfect circle ignores size altogether: write 50% and any square element rounds fully.

    
How it works
Each radius pair defines a quarter ellipse, measured horizontally along the width and vertically along the height. Eight equal values at half the side length produce a circle. When adjacent radii overflow a side, the browser scales them all by one factor to keep the shape closed. That is why some large values seem to change nothing. The rounded region clips backgrounds and overflowing content, and overflow hidden leans on that behavior to crop images. The property also transitions smoothly, enabling small morphing interactions between shapes. 
Radii are now a base variable of most design systems, commonly built on 4, 8, 12 and 16. Large radii feel friendly and soft, small radii feel crisp and professional, so the choice itself sets the tone. Asymmetric radii create drops and leaves, and the eight value form builds irregular blobs that decorate pages more cheaply than illustrations. Keep text containers to modest radii, since big curves squeeze the reading area and hurt line lengths. Body cards do best with small to medium corners.

    
When to use it
  1. Avatars and covers
    Community pages lean on rounded avatars and covers. A shared 8 to 16 pixels works for rectangles, and full rounding handles circles. With overflow hidden the image clips itself to the shape and needs no extra processing of the source file.
  2. Buttons and cards
    Buttons usually sit between 6 and 10 pixels while cards take 12 to 20. Two or three tiers carry a whole site. A pill shaped primary button, fully rounded, separates cleanly from secondary actions by weight alone. Apply the same rule to form confirm buttons so emphasis stays predictable.
  3. Organic decoration
    Landing pages use blob mode to build asymmetric organic shapes that feel livelier than plain rounded blocks and lighter than illustrations. Save the eight values and reuse them across sections. A few offset color blocks already form a backdrop set, and the shapes animate nicely on scroll.

    
Tips & tricks
  • Follow the design system for radii, and multiples of 4 keep the whole site consistent.
  • For a circle on a non square element write 50% instead of forcing fixed pixels.
  • Pair large radii with overflow hidden, or images will spill past the rounded corners.

    
Things to watch
  • Content spills past corners
    Border radius clips backgrounds and overflowing content, but an image without overflow hidden still covers the corners squarely. Avatars and covers hit this most often. Add hidden overflow on the container or round the image itself so the shape completes.
  • Circle values on rectangles
    Maxing four corners on a rectangle yields a capsule, not a circle, since the two ends stay half circles. A true circle needs a square element or a 50% value. Half of each side rounds fully without any extra math, whatever the size.
  • Mixing up the eight values
    In the eight value form the slash lists four horizontal radii first, then four vertical ones. Both groups run clockwise from the top left. Reversing them ruins the shape, and no amount of dragging fixes the order. Confirm the direction of both groups before adjusting, then calibrate corner by corner.

  

          
Related Tools