CSS Border Radius Generator

CSS border-radius rounds the corners of an element's outer border edge. You can set a single value for all corners or different values for each corner. It accepts pixel (px), percentage (%), and other CSS length units.

Set border-radius to 50% on a square element (equal width and height). For example: width: 100px; height: 100px; border-radius: 50%; — this creates a perfect circle. If the element is not square, 50% creates an ellipse instead.

Yes. Use the shorthand with four values: border-radius: 10px 20px 30px 40px; — this sets top-left, top-right, bottom-right, and bottom-left in clockwise order. You can also use individual properties like border-top-left-radius for precise control.

The 8-value syntax uses a slash to define horizontal and vertical radii separately: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%. The values before the slash control horizontal radii and after the slash control vertical radii, allowing organic blob-like shapes.

Yes, border-radius works on images and any HTML element. Apply it directly to an <img> tag or its container. Combined with overflow: hidden on a container, you can create circular profile images, rounded card thumbnails, and other shaped image displays.