CSS Border Radius Generator

Controls

Preview

CSS Output

 
   
 
 
  
 
 
 
How to Use
 
     
  1. Link or split — Toggle "All corners" to round uniformly, or set each corner independently.
    2.  
  2. Set values — Drag sliders or type values for each corner.
    3.  
  3. Pick a unit — px for fixed UI, % for scalable shapes, rem for typography-relative rounding.
    4.  
  4. Copy & paste — Use "Copy Shorthand" for one line or "Copy Longhand" for individual corners.
    5.  
 
 
 
What Is CSS Border Radius?
 
border-radius rounds element corners before backgrounds and borders are clipped. One value rounds all corners; up to four values target each corner clockwise from top-left.
 
Percentages are relative to element size — 50% on a square makes a circle. Supported universally in all modern browsers.
 
 
 
Common Use Cases
 
 
Rounded cards
 
Circular avatars
 
Pill-shaped buttons
 
Asymmetric corners
 
Photo clipping
 
Speech bubbles
 
 
Tips & Best Practices
 
 
 Shorthand order 
Top-left, top-right, bottom-right, bottom-left — clockwise from top-left.
 
 
 Perfect circles 
Equal width and height + border-radius: 50%. That's it.
 
 
 Pill shape trick 
Use 9999px for pill ends without calculating half the element height.
 
 
 Nested cards 
Inner cards look better with a slightly smaller radius than the outer card.
 
 
 
Frequently Asked Questions
 
 
What is the border-radius shorthand order?
 
Four values: top-left, top-right, bottom-right, bottom-left. Two values: diagonal pairs. One value: all corners equal.
 
 
 
Should I use px, %, or rem?
 
px for consistent components. % for scalable rounding (circles, fluid cards). rem to track root font size.
 
 
 
Why does my image stay square?
 
Apply radius to the img directly, or use a wrapper with overflow: hidden. Radius on a parent alone may not clip children.
 
 
 
Can I make elliptical corners?
 
Yes. Use slash syntax: border-radius: 40px / 20px for different horizontal and vertical radii.
 
 
 
Does border-radius work in all browsers?
 
Yes. Supported everywhere modern CSS runs, including mobile Safari. Use longhand if mixed-unit shorthand gets ignored.