Create rounded corners and organic shapes visually. Adjust each corner individually and copy the CSS instantly.
The CSS border-radius property rounds the corners of an element's border box. You can give each corner a different radius to create asymmetric shapes, or use a single value to round all corners equally. A border-radius of 50 percent on a square element creates a circle.
The property accepts one to four values. One value applies to all corners. Two values apply to top-left and bottom-right for the first, and top-right and bottom-left for the second. Four values apply individually to top-left, top-right, bottom-right, and bottom-left in that order.
Set border-radius to 50% on a square element. The element must have equal width and height. If the dimensions differ you will get an ellipse instead of a circle.
Pixel values give a fixed corner size regardless of the element size. Percent values scale with the element. Use percent when you want the corner radius to stay proportional as the element resizes.