ToolPremier Logo
ToolPremier

Home  ›  Developer Tools  ›  Border Radius Generator

Border Radius Generator
Shape any element corners visually – set all four radii independently for pills, squircles, asymmetric shapes, and everything in between, then copy the CSS.
✓ Free✓ No signup✓ Privacy first✓ Runs in your browser
Border Radius Generator – ToolPremier

Visual CSS border-radius generator · all four corners · px % em rem units · live preview · copy CSS

How it works
Convert in three steps

1. Drag the corner handles

Adjust the radius of each corner independently - top-left, top-right, bottom-right, bottom-left - or lock all corners to the same value for uniform rounding.

2. Choose your unit

Set radii in px for fixed-size elements or % for proportional rounding that scales with element size (50% on a square produces a perfect circle).

3. Copy the CSS

Get the border-radius shorthand or expanded four-property form - ready to paste into your stylesheet.

FAQ
Common questions
px sets a fixed corner radius regardless of element size – a border-radius: 8px looks the same on a 50px button as it does on a 500px card. % is relative to the element dimensions – border-radius: 50% on a square element creates a perfect circle, and on a rectangle creates an ellipse. Use px when you want consistent corner size across different element sizes; use % when you want corners that scale proportionally.
Set border-radius to a value large enough that the corners meet – 9999px or 100px both work for typical button heights. The browser clips the radius at half the element height, so any value larger than half the height produces the same pill result. border-radius: 9999px is the convention used by most design systems for pill-shaped components.
The slash syntax allows setting horizontal and vertical radii independently for each corner – creating elliptical corners rather than circular ones. For example, border-radius: 30px 30px 30px 30px / 10px 10px 10px 10px creates corners that are wide (30px) but shallow (10px). This is used for organic, non-circular corner shapes in more complex UI designs.
border-radius works on any block or inline-block element. It also clips the content and background to the rounded shape when overflow: hidden is set. Without overflow: hidden, child elements may visually overflow the rounded corners. For images, set both border-radius and overflow: hidden on the container, or apply border-radius directly to the img element.
Keep going
Related tools

Box Shadow Generator

Add shadows to elements with your custom border radius.

Open tool

CSS Gradient Generator

Fill border-radius-shaped elements with gradients.

Open tool

Flexbox Playground

Arrange border-radius-styled components in Flexbox layouts.

Open tool

CSS Grid Generator

Place rounded components in CSS Grid layouts.

Open tool
About the Border Radius Generator
border-radius is deceptively simple for basic use – set a single value, get rounded corners – but the full property supports independent control of all four corners, separate horizontal and vertical radii, and percentage-based values that scale with element size. Most developers use a single number and move on, but the asymmetric and elliptical shapes possible with the full syntax are underused and visually distinctive. This generator exposes all the controls visually: drag any corner independently, toggle between uniform and per-corner mode, switch between px and %, and see the result update on a live element preview. Copy the CSS shorthand or the expanded four-value form.
Benefits
  • Independent corner control - set each of the four corners to different values for asymmetric shapes.
  • px and % unit support - fixed rounding and proportional scaling both covered.
  • Elliptical corner support - horizontal/vertical radius control via the slash syntax for non-circular curves.
  • Live element preview - see the shape update as you drag, before copying the CSS.
Privacy
All generation runs client-side in your browser. No design data is transmitted to any server.