CSS Border Radius Generator
Build a CSS border-radius with a live preview: round each corner on its own in pixels or percent, then copy the code. Free and in your browser.
What this tool does
Border radius generator with a live preview. Set the top left, top right, bottom right and bottom left corners on their own, switch between pixels and percent, and watch a sample box round in real time. The border-radius rule appears ready to copy, and everything runs in your browser.
What you can use it for
- Round the corners of a card, a button or an image on a landing page.
- Make a pill shaped button by pushing the corners up in percent.
- Create an asymmetric shape with a different radius on each corner.
- Try corner settings before pasting the rule into your stylesheet or Tailwind theme.
How to use it
- Set the radius for the top left and top right corners.
- Set the radius for the bottom right and bottom left corners.
- Choose pixels for a fixed radius or percent for one that scales with the box.
- Watch the live preview, then copy the border-radius rule below.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Pairs well with
Other tools people reach for in the same flow.
- CSS Box Shadow GeneratorComing soon
build CSS box shadows
Once you have the base color.
- CSS Gradient Generator
build CSS gradients
Once you have the base color.
- Color Converter: HEX, RGB, HSL
convert colors between HEX, RGB and HSL
Pick the colors for your gradient.
- Color Palette Generator
generate color palettes
Pick the colors for your gradient.
Related tools
DesignCSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
Color Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
Frequently asked questions
In what order are the four corners written?
The output uses the canonical CSS order: top left, top right, bottom right and bottom left. That clockwise order, starting from the top left, is the same one the border-radius longhand expects, so the rule you copy applies each value to the corner you set.
What is the difference between pixels and percent?
A radius in pixels stays the same size whatever the box measures. A radius in percent is relative to the box, so 50 percent on every corner turns a square into a circle and a rectangle into a pill. Pick percent when you want the rounding to scale with the element.
How do I make a perfect circle or a pill?
Set every corner to 50 percent. On a square box that gives a circle; on a wider box it gives a pill or capsule shape. Switch the unit to percent first, then raise the corners to 50.
Can I use the generated CSS directly?
Yes. The output is a complete border-radius declaration you can paste straight into your stylesheet, a CSS variable or a Tailwind arbitrary value. It always writes the four corner longhand, so each corner keeps the value you chose.