Create stunning shapes with custom border radius properties
.element {
border-radius: 10px;
}The CSS border-radius property allows you to create rounded corners on elements. It can be customized for each corner individually and supports elliptical shapes.
For organic blob shapes, try using different values for each corner and experiment with the random generator.
To create a perfect circle, set a uniform radius to 50% on a square element.
Use percentage values for responsive designs that adapt to different container sizes.
The shorthand syntax allows you to set all corners at once:
border-radius: 10px 20px 30px 40px;For elliptical shapes, use:
border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;