Create custom rounded corners and organic blob shapes with individual corner control. See a live preview and copy the CSS in one click.
Use Simple mode to set uniform or per-corner rounded values. Link all corners for a single slider, or unlink them to control each corner independently. Switch to Fancy mode to create organic blob shapes using the full 8-value CSS border-radius syntax, where each corner gets separate horizontal and vertical radii.
The CSS border-radius property rounds the corners of an element. A single value rounds all four corners equally. Four values set each corner individually in the order: top-left, top-right, bottom-right, bottom-left. Using 50% on a square element creates a perfect circle.
The full syntax supports a / separator to define horizontal and vertical radii separately for each corner: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. This creates asymmetric, organic blob shapes that are popular in modern UI design. The values before the slash control horizontal rounding, and those after control vertical rounding.
Pixel values give you fixed-size rounded corners regardless of the element's size — useful for consistent UI components. Percentage values are relative to the element's dimensions, making them responsive. A border-radius: 50% always creates a circle or ellipse regardless of the element's size.
border-radius property rounds the corners of an element. You can set a single value for all corners, four values for each corner individually, or use the full 8-value slash syntax for organic shapes.border-radius: 50% on an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50%;. This creates a perfect circle./ separator. This creates organic blob shapes — e.g. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.border-radius: 10px 20px 30px 40px; (top-left, top-right, bottom-right, bottom-left). Or use individual properties like border-top-left-radius.50% always creates a circle/ellipse. Pixels give fixed-size corners regardless of element size.<img> tags. Use border-radius: 50% to create circular avatar images, or smaller values for subtly rounded corners.