WerklyTools
Esc
↑↓ navigate↵ open
EN
Buy me a coffee

CSS border-radius generator

Adjust the rounding of each corner with sliders and see the result live. Use one radius, one per corner or elliptical radii for organic shapes, in px, % or rem. Copy the CSS when you like it.

Processed 100% in your browser

Mode
Unit
Quick shapes
Preview
CSS

Ctrl + Enter runCtrl + C copy result

How to use

  1. 1Choose the mode: all equal, per corner or elliptical.
  2. 2Move the sliders and change the unit if you need to.
  3. 3Try the quick shapes such as pill, circle or leaf.
  4. 4Copy the generated CSS and paste it into your stylesheet.

Use cases

  • Round the cards, buttons and images of an interface.
  • Create drop or organic shapes for backgrounds and avatars.
  • Make a perfect circle or a pill-shaped button.
  • Understand how the slash syntax of border-radius works.

Frequently asked questions

How do I make a circle with border-radius?

Use 50% on a square box. On a rectangular box you get an ellipse; for a pill, use a very large radius such as 999px.

What does the slash in 50% / 30% mean?

It separates the horizontal radii from the vertical ones. With it each corner can be an ellipse instead of a quarter circle, which allows organic shapes.

What order do the values follow?

They start at the top left and go clockwise: top left, top right, bottom right and bottom left.

Is it better to use px, % or rem?

px gives a fixed rounding, % adapts to the box size (handy for circles and blobs), and rem scales with the page font size.

Related tools

CSS box-shadow generatorDesign realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.
WCAG color contrast checkerChoose your text and background colors and instantly get the contrast ratio and whether it meets the AA and AAA levels of the WCAG accessibility guidelines. If it fails, the tool suggests a similar color that passes. It all happens in your browser.
Color converter (HEX, RGB, HSL, CMYK, OKLCH)Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.
Color palette generatorStart from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.
CSS gradient generatorDesign gradient backgrounds by dragging color stops along a bar, choose the type (linear, radial or conic) and copy production-ready CSS with a fallback color and a modern OKLCH version without grey dead zones.
CSS Grid generatorSet columns, rows and gaps with sliders and see the result live. Copy the CSS and HTML ready to paste into your project.