CSS Border Radius Generator
Visually design corner radii with a live preview and generate the border-radius CSS, shorthand or per-corner.
All Corners: 24px
How to Use the Border Radius Generator
Toggle "Uniform" off to control each corner independently, or leave it on to adjust all four corners together with a single slider. The preview box updates live, and the generated CSS automatically switches between the short one-value form (when all corners match) and the full four-value form (when they differ).
Example
Setting all corners to 24px generates the shorthand border-radius: 24px;. Setting a "squircle" card with a sharp bottom-left corner (top-left 24px, top-right 24px, bottom-right 24px, bottom-left 0px) generates border-radius: 24px 24px 24px 0px;.
Common Use Cases
- Designing rounded cards, buttons, and modals visually instead of guessing pixel values.
- Creating asymmetric or "organic" shapes with mismatched corner radii.
- Quickly generating copy-paste-ready CSS for a design system or component library.
FAQs
What order are the four values in?
CSS's border-radius shorthand always follows the order top-left, top-right, bottom-right, bottom-left — the same clockwise-from-top-left convention used by other CSS shorthand properties like margin and padding.
Can I use percentages instead of pixels?
This generator outputs pixel values, which work well for most fixed-size UI elements. For a shape that should scale with the element (like a perfect circle or pill button regardless of size), you can manually replace the pixel value with 50% in your CSS.
Does browser support vary for border-radius?
No — border-radius has been supported unprefixed in all modern browsers for many years, so the CSS generated here works everywhere without vendor prefixes.