CSS Border Radius
The CSS Border Radius Generator sets each corner of an element’s border-radius in percent with individual sliders or one All Corners slider, plus presets like circle, leaf and blob, and copies the CSS.
About this tool
The CSS Border Radius Generator sets each corner of an element’s border-radius in percent with individual sliders or one All Corners slider, plus presets like circle, leaf and blob, and copies the CSS.
How to use it
- Drag the sliders for each corner, or use All Corners.
- Try a preset such as Circle, Leaf or Blob.
- Change the preview size if needed.
- Click Copy CSS.
Good to know
- border-radius takes up to four values in the order top-left, top-right, bottom-right, bottom-left.
- border-radius: 50% on a square element makes a circle.
- Percentage radii scale with the element’s size; pixel radii stay fixed.
- Uneven radii on opposite corners create leaf and blob shapes without any SVG.
- border-radius is supported in every current browser without prefixes.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I make rounded corners in CSS?
Set border-radius, for example border-radius: 12px; for all corners, or four values for individual corners.
How do I make a circle with CSS?
Give the element equal width and height and border-radius: 50%.
What order are the four border-radius values?
Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left corner.
Should border-radius use px or %?
Use px for consistent corner sizes on buttons and cards; use % for shapes such as circles and blobs that scale with the element.