Free Border Radius Generator

Shape perfect rounded corners without guessing numbers. Drag a slider per corner, watch the live preview update, switch between pixels and percentages, and copy the resulting CSS — from subtle 8px card corners to full pill buttons and organic blob shapes.

CSS output


    

    
    
    



  
Private by design. This tool runs 100% in your browser — your code is never uploaded to any server.

  

    
How to Use the Border Radius Generator

    
    
      
  1. Drag the four corner sliders (top-left, top-right, bottom-right, bottom-left).
    2. 
      
  2. Toggle between px and % units to suit your design.
    3. 
      
  3. Watch the live preview update as you adjust.
    4. 
      
  4. Click Copy CSS and paste the rule into your stylesheet.
    5. 
    

  

  

    
Features

    
Each corner gets its own slider from 0 to 200 (px or %), and the preview renders instantly on a gradient panel so you can judge the shape in context. The generator outputs the full border-radius shorthand — expanding to four values only when corners differ — plus an optional elliptical horizontal/vertical radius mode for advanced blob shapes.

    
Benefits & Use Cases

    
UI designers prototype card, button, avatar, and badge radii visually instead of editing code and refreshing; the per-corner control makes asymmetric designs — like chat bubbles with one sharp corner — trivial. Copy-paste output drops straight into any stylesheet, Tailwind arbitrary value, or design-system token.

    
Tips

    
Use 50% on a square element for a perfect circle, and 999px (or a huge value) for pill buttons that stay pill-shaped at any width. For “Squircle”-style iOS corners, keep all four corners equal and relatively large. Percentages are relative to each side, so 50% on a rectangle gives an ellipse, not a circle.

  

  

    
Frequently Asked Questions

    
What does border-radius do in CSS?
Border-radius rounds the corners of an element’s box. You can set one value for all corners or four values for top-left, top-right, bottom-right, and bottom-left independently, in pixels, percentages, or other length units.

    
Should I use px or % for border-radius?
Use px when you want a fixed corner size regardless of element size (e.g. 8px card corners). Use % when the rounding should scale with the element — 50% on a square makes a perfect circle.

    
How do I make a pill-shaped button?
Set border-radius to a very large value like 999px. The browser clamps it, so the ends become perfect semicircles at any button width.

    
What is elliptical border-radius?
The slash syntax (e.g. border-radius: 40% / 20%) sets horizontal and vertical radii separately, producing elliptical rather than circular corners — the basis of organic “blob” shapes.

    
Is the generated CSS cross-browser safe?
Yes. Border-radius is supported by every modern browser without prefixes, so the output works in Chrome, Firefox, Safari, and Edge as-is.

  

  

    
Related Tools

    

      
Box Shadow Generator
Create soft, realistic CSS box shadows with sliders and copy the code. Free box shadow generator for web designers — no sign-up required.
Open tool →
      
CSS Gradient Generator
Build linear, radial and conic CSS gradients visually and copy the code. Free CSS gradient generator with live preview — no sign-up.
Open tool →
      
CSS Formatter
Beautify messy CSS instantly with NToolHub’s free CSS formatter. Clean indentation, readable rules, comment-safe — 100% private in-browser tool.
Open tool →
      
Color Code Converter
Convert colors between HEX, RGB and HSL instantly with NToolHub’s free converter. Live preview swatch, one-click copy — private and fast.
Open tool →
      
Hex to RGB
Convert HEX codes to RGB values instantly with a live color preview. Free HEX to RGB converter, one-click copy — no sign-up needed.
Open tool →