CSS Border Radius Generator
Round each corner with pixel or percentage radii, link all four together, or switch to
elliptical radii for the / syntax. Watch a live, resizable preview and copy the CSS.
Everything runs in your browser — nothing is sent anywhere and nothing is stored.
How to use the border radius generator
- Pick a unit — px for a fixed curve or % for one that scales with the box.
- Drag each corner’s slider, or tick Link all corners to move them together.
- Turn on Elliptical radii to set a separate horizontal and vertical radius per corner (the
/syntax). - Resize the preview with the width and height inputs to see how percentage radii respond, then click Copy.
The shorthand lists corners clockwise from the top-left: border-radius: top-left top-right bottom-right bottom-left;.
Elliptical radii add the vertical set after a slash, for example border-radius: 40px 10px / 20px 30px;.
More PAYATE tools
Frequently asked questions
What is the CSS border-radius property?
border-radius rounds the corners of an element’s box. It is a shorthand for the four corner properties — border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius — so one declaration can set all four corners at once.
What order are the four corners written in?
The shorthand lists corners clockwise starting from the top-left: top-left top-right bottom-right bottom-left. So border-radius: 12px 8px 20px 4px; means top-left 12px, top-right 8px, bottom-right 20px and bottom-left 4px.
What is the difference between px and % radii?
A pixel radius is a fixed length, so the curve stays the same size whatever the box size. A percentage radius is relative to the box — the horizontal part to the width and the vertical part to the height — so the corners scale as the element grows or shrinks. A radius of 50% on every corner turns a square into a circle.
What is the elliptical (slash) syntax?
Each corner can have two radii: a horizontal and a vertical one, which makes the corner an ellipse instead of a quarter circle. They are written with a /: border-radius: 40px 10px / 20px 30px; — horizontal radii before the slash, vertical radii after it.
Is my data sent anywhere?
No. The generator runs entirely in your browser — nothing is uploaded to a server and nothing is stored. You can copy the generated CSS and paste it straight into your stylesheet.
Why do my percentage corners look different when I resize the box?
Because percentages are relative to the box dimensions. On a non-square box the horizontal radius is a share of the width and the vertical radius a share of the height, so the same percentage produces a flatter or taller curve as the width-to-height ratio changes. Use the width and height inputs to preview this.