)

Border Radius Preview Tool

Visualize and customize border-radius values with precision. Control individual corners, use preset shapes, and export as CSS or Tailwind classes.

Border Radius Preview Tool

Preview and customize border-radius values with individual corner controls and preset shapes

All Corners: 25px

Top Left

Top Right

Bottom Right

Bottom Left

Preset Shapes

Background Color

Preview Size: 200px

border-radius: 25px 25px 25px 25px;

rounded-[25px]

Understanding Border Radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or multiple values to create elliptical corners with different radii for each corner.

Syntax

border-radius: top-left top-right 
         bottom-right bottom-left;

When all four values are provided, they apply to the corners in clockwise order: top-left, top-right, bottom-right, bottom-left.

Common Values

0: Sharp corners (no rounding)
4-8px: Subtle rounding (cards, buttons)
12-16px: Moderate rounding (modern UI)
50%: Perfect circle (when width = height)
999px: Pill shape (very rounded)

Preset Shapes

Circle

All corners set to 50% creates a perfect circle when applied to a square element.

Pill

Very large radius values (999px) create pill-shaped elements, perfect for buttons and badges.

Card

Subtle 8px rounding gives a modern, polished look to card components.

Button

6px radius provides a balanced look for interactive buttons.

Top Only

Rounded top corners only, useful for dropdowns and modals.

Bottom Only

Rounded bottom corners only, great for tabs and navigation elements.

Frequently Asked Questions

What's the difference between px and % values?

Pixel values create a fixed-radius corner, while percentage values are relative to the element's dimensions. Using 50% on all corners of a square creates a perfect circle. Percentage values are particularly useful for responsive designs.

Can I use different values for each corner?

Yes! The border-radius property accepts up to four values, one for each corner. Use the individual corner controls or unlink the corners to set different values. This is useful for creating unique shapes and asymmetrical designs.

How do I convert to Tailwind classes?

Our tool automatically generates the appropriate Tailwind class. For standard values, Tailwind provides utility classes like rounded-lg. For custom values, it generates arbitrary values likerounded-[25px]. The generated class is shown in the code output section.

What's the maximum border-radius value?

There's no technical maximum, but values larger than the element's dimensions won't create additional rounding. For pill shapes, values like 999px effectively create maximum rounding. Our tool supports values up to 999px for this purpose.