About the CSS Border Radius Generator
The CSS Border Radius Generator makes rounded corners easy. Control each of the four corners independently with sliders, in pixels or percentages, or link them to round all corners equally. A value of 50% on every corner turns a square into a perfect circle.
Click Random blob to generate organic, fluid shapes using the advanced eight-value border-radius syntax (horizontal and vertical radii separated by a slash). Blob shapes are popular for avatars, image masks, decorative backgrounds and playful landing pages, and they are lighter than SVG images.
How to use the CSS Border Radius Generator
- Drag the slider for each corner, or link all corners.
- Switch between percent and pixel units.
- Try Random blob for organic shapes.
- Copy the border-radius CSS.
Frequently asked questions
How do I make a circle with CSS?
Give an element equal width and height and set border-radius: 50%.
What does the slash in border-radius mean?
Values before the slash set horizontal radii and values after it set vertical radii, allowing elliptical corners and blob shapes.
Should I use px or %?
Pixels keep the same curve at any size; percentages scale with the element, which is better for circles and blobs.