CSS Border Radius Generator
Generate clean CSS border-radius declarations with custom corner values and units.
Run tool
This online CSS border-radius generator creates standard CSS corner declarations for web styling and interface layout. You can define separate radius values for each of the four corners: top-left, top-right, bottom-right, and bottom-left. The tool places your values in standard CSS shorthand order, starting from the top-left corner and proceeding clockwise around the container. Each corner field accepts numerical input and defaults to 10 when left blank. You can also customize the measurement unit, which defaults to pixels (`px`), or enter alternatives such as `%`, `em`, `rem`, or `vw` depending on your layout requirements. Once generated, the output provides a clean `border-radius` CSS property ready to paste into your stylesheet, design system, or inline style attribute. Whether configuring symmetrical rounded rectangles, pill-shaped buttons, or asymmetric card shapes with flat and rounded edges, this utility delivers accurate CSS code instantly.
Instructions
- Enter numerical values for the top-left, top-right, bottom-right, and bottom-left corners.
- Specify the desired CSS unit, such as px, %, rem, or em (defaults to px).
- Run the generator to produce the formatted CSS border-radius rule.
- Copy the generated declaration directly into your CSS stylesheet or HTML element.
Examples
- Uniform 15px radius: Setting all four corners to 15 with unit px generates border-radius: 15px 15px 15px 15px;
- Asymmetric tab shape: Setting Top Left to 8, Top Right to 8, Bottom Right to 0, Bottom Left to 0 with unit px generates border-radius: 8px 8px 0px 0px;
- Percentage-based curve: Setting all four corners to 50 with unit % generates border-radius: 50% 50% 50% 50%;
FAQ
What order does the generated CSS border-radius declaration follow?
The declaration follows standard CSS clockwise order: top-left, top-right, bottom-right, and bottom-left.
What default values are applied if I leave fields empty?
If omitted, each corner value defaults to 10, and the unit field defaults to px.
Can I use CSS units other than pixels?
Yes, you can enter any valid CSS length unit in the unit field, including %, rem, em, or vw.