HandyTools Hub

Border Radius Generator

Design rounded corners visually and copy the CSS

 
 
 
  
How to Use


    

  1. Pick a mode — Simple mode edits one radius per corner; Elliptical mode adds independent vertical radii for slash-syntax output.
    2. 

  2. Choose a unit — Switch between px and % at any time; the slider values carry over unchanged.
    3. 

  3. Drag the corner sliders — Adjust each corner from 0 to 100, or type an exact number. Enable “Link corners” to move all four together.
    4. 

  4. Tune the elliptical radii — In Elliptical mode, set the vertical radius of each corner separately to create oval, squircle-like, or blob shapes.
    5. 

  5. Copy the CSS — The output collapses matching corners to the shortest valid shorthand and only emits the slash syntax when it is actually needed.
    6. 



Features


    

  • Two editing modes — Simple 4-corner editing plus a full 8-value elliptical mode (a b c d / e f g h).
    • 

  • Linked or independent corners — A single toggle moves all corners in sync or unlocks per-corner control.
    • 

  • px and % units — Fixed pixel radii or element-relative percentages, switchable at any time.
    • 

  • Live preview — Every change renders immediately on the demo box, exactly as the browser will paint it.
    • 

  • Minimal output — Uniform corners collapse to a single keyword, matching corners use the 2- or 3-value shorthand, and the slash appears only for true elliptical radii.
    • 

  • 100% client-side — Everything runs in your browser; no data ever leaves your device.
    • 



Use Cases


    

  • Squircle-style cards: Give a card large horizontal radii with slightly smaller vertical radii for a modern, iOS-like rounded rectangle.
    • 

  • Organic blobs: Set each corner to a different elliptical radius to prototype blob shapes for hero sections and avatars.
    • 

  • Circles and pills: Switch to %, link the corners, and set 50% to get a perfect circle (square element) or pill (wide element) without doing the math.
    • 

  • Learning the shorthand: Toggle linked corners and watch how the generated CSS collapses between one, two, three, and four values.
    • 




Frequently Asked Questions
What is the slash syntax in border-radius?
The slash separates horizontal and vertical radii: border-radius: 10px 20px / 30px 40px gives each corner a horizontal radius (before the slash) and an independent vertical radius (after it). This produces elliptical corners instead of perfect quarter-circles. Switch to Elliptical mode to edit all eight values.
Should I use px or % for border-radius?
Use px when you want a fixed, predictable corner size that stays the same regardless of the element's dimensions. Use % when the rounding should scale with the element — 50% on all corners turns any rectangle into a circle or ellipse. Percentages are relative to the element's own width (horizontal) and height (vertical).
How does the 4-value shorthand map to corners?
Values are applied clockwise starting from the top-left corner: top-left, top-right, bottom-right, bottom-left. When adjacent or opposite corners share a value, CSS lets you omit the duplicates — one value applies everywhere, two values set (top-left/bottom-right) and (top-right/bottom-left). The generator collapses the output automatically.