How to use CSS Border Radius Generator
- Adjust the radius of each corner.
- Check the preview.
- Copy the border-radius CSS.
About this tool
The border-radius shorthand takes four values in clockwise order starting at the top left: top left, top right, bottom right, bottom left. Equal values collapse to a single number. A radius of 50% on a square makes a circle, and a very large radius on a rectangle makes a pill.
Percentages are relative to the size of the box.
Frequently Asked Questions
- How do I make a circle?
- Use a square element with border-radius: 50%.
- In what order are the corners listed?
- Top left, top right, bottom right, bottom left.
Related tools
- CSS Box Shadow GeneratorAdjust the sliders and copy the box-shadow CSS.
- CSS Button GeneratorCreate a styled button and copy its CSS, including the hover state.
- CSS Text Shadow GeneratorAdd depth or a glow to text and copy the CSS.
- PX to REM ConverterConvert between pixels and rem for scalable CSS.
- CSS Clamp GeneratorCreate fluid sizes that grow between a minimum and maximum viewport.
- Glassmorphism CSS GeneratorBuild a frosted glass card and copy the CSS.