CSS & colour
CSS Border Radius Generator
Set all four corners together or one by one, in pixels, percent or rem. Switch to elliptical mode to give each corner a different horizontal and vertical radius for organic, blob-like shapes.
Loading tool…
Preview
CSS
Presets
Corners
How to use the CSS Border Radius Generator
- Choose a unit (px, % or rem).
- Move the sliders. Keep “Link corners” on to change all four at once, or turn it off for individual control.
- Turn on “Elliptical” for separate horizontal and vertical radii.
- Copy the CSS.
Tips for better results
- A pill-shaped button needs a radius at least half its height; a very large value such as 999px always works.
- Use 50% on a square element to make a perfect circle.
- For consistent interfaces, choose two or three radii and reuse them as variables.
Limitations you should know about
- If the radii on one side add up to more than the element’s size, browsers scale them down proportionally, so the preview may differ from large values you typed.
Frequently asked questions
What does the slash in border-radius mean?
A value like 50% 30% / 20% 60% sets horizontal radii before the slash and vertical radii after it, producing elliptical corners.
How do I make a circle with CSS?
Give a square element border-radius: 50%.
Which unit should I use?
Use px or rem for consistent rounded corners, and % when you want the shape to scale with the element, for example circles and ovals.
Guides that use this tool
Related tools
- CSS Box Shadow Generator Design single or layered box shadows visually and copy the CSS.
- CSS Gradient Generator Build linear, radial and conic gradients with multiple colour stops and copy the CSS.
- Color Palette Generator Build harmonious palettes from one colour, or extract the dominant colours from an image.