Border Radius Generator

The CSS border-radius property allows web developers to add rounded corners to HTML elements. It accepts values in pixels, percentages, rem, or em. You can apply the same radius to all four corners with a single value, or target each corner independently using the longhand syntax: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. You can also provide two values per corner to create elliptical curves — perfect for organic, pill-shaped designs.

To make a square element into a perfect circle, use percentage units instead of pixels. Setting border-radius: 50% tells the browser to curve each corner exactly halfway along each edge. For this to produce a circle (not an ellipse), the element must have equal width and height. This technique is widely used for avatar images, icon buttons, and circular badges. For non-square elements, border-radius: 50% produces an ellipse — to force a circle regardless, use border-radius: 9999px(a very large pixel value that exceeds the element's dimensions).

Use the sliders to adjust the border radius for each corner independently or all at once. Toggle between pixel (px) and percentage (%) units depending on your design needs. The live preview updates in real time, and you can copy the generated CSS or the equivalent Tailwind class with a single click. This eliminates trial-and-error in your code editor and lets you visually achieve the exact shape you envision.

While using px guarantees exact curvature regardless of element size, % creates dynamic, scalable curves that shift proportionally with the container. Percentage border radii are recommended for responsive imagery and fluid layouts where element dimensions change at different breakpoints. For fixed-size UI components like buttons and badges, pixel values provide more predictable and precise corners.

• Rounded cards and panels: border-radius: 8px to 16px for subtle softness
• Pill-shaped buttons: use a large value like 9999px or 50% on a wider element
• Circular avatars and icons: square element with border-radius: 50%
• Asymmetric organic shapes: different values on each corner for creative hero sections
• Rounded input fields: 4px–8px for modern form styling
• Badge and tag components: slightly rounded corners with 4px–6px