CSS Border Radius Generator
NEWDial in CSS rounded corners visually — set each corner independently, switch units, and copy clean border-radius CSS.
Corner radius
Preview size
Preview
CSS
How to use Border Radius Generator
- Drag each corner slider (or type a value) to set the radius for Top-Left, Top-Right, Bottom-Right and Bottom-Left.
- Pick a unit — px, % or em — and optionally enable Link to move all corners together.
- Turn on Elliptical / organic blob to add a second vertical radius per corner for blob shapes.
- Click Copy CSS to grab the ready-to-paste border-radius declaration.
What is Border Radius Generator?
The CSS border-radius property rounds the corners of an element's box. This generator lets you control all four corners — top-left, top-right, bottom-right and bottom-left — independently, with a live preview so you can see the shape as you tweak it.
Switch between px, % and em units, or enable the elliptical mode to give each corner separate horizontal and vertical radii using the slash syntax (border-radius: TL TR BR BL / TLv TRv BRv BLv). This is how organic "blob" shapes are made. When corners match, the output automatically collapses to the shortest valid shorthand.
FAQ
- What is the slash in border-radius syntax?
- The slash separates horizontal radii from vertical radii. border-radius: 50px / 20px gives each corner a 50px horizontal and 20px vertical curve, producing an elliptical rounding. With four values on each side you can craft organic blob shapes.
- Should I use px or percentages?
- Use px for fixed, predictable corners regardless of element size. Use % when you want the rounding to scale with the element — for example, border-radius: 50% on a square makes a perfect circle.
- Does this work in all browsers?
- Yes. border-radius is supported in every modern browser without a prefix, including the elliptical slash syntax. No vendor prefixes are needed.
Related tools
People also use
- Clip Path Generator🗄️ Developer Tools
Create CSS clip-path shapes visually — polygons, circles, insets and 20+ presets with draggable points. Live preview and copy-paste CSS, in your browser.
- CSS Button Generator🗄️ Developer Tools
Design a CSS button visually — padding, colors, gradients, border-radius, shadow and hover effects — with a live preview, then copy the CSS. In-browser.
- CSS Triangle Generator🗄️ Developer Tools
Make CSS triangles with the border trick — choose direction, width, height and color, preview live, and copy the width/height/border CSS. Runs in browser.
Last updated: