Border Radius Generator

Visually design CSS border-radius with per-corner control

Corner Radii

All Corners24px

Quick Shapes

Box Color

Preview

CSS Code

CSS

border-radius: 24px;

Tailwind

className="rounded-[24px]"

About the Border Radius Generator

This border radius generator controls each corner of a box independently or all four together, previewing the shape live and outputting the CSS. Presets cover the common cases from a 4-pixel card to a fully rounded pill.

A border radius generator is useful because the shorthand is order-sensitive and easy to get wrong. Four values run clockwise from the top left, and a slash introduces separate horizontal and vertical radii — which is how squircles and leaf shapes are made, and where hand-written CSS usually goes astray.

Corners can be linked so all four move together, or unlinked to build asymmetric shapes such as a card with only its top corners rounded, or a speech bubble. Presets provide the values that come up repeatedly: 4 pixels for tight cards, 8 to 16 for general UI, and a very large value for pills and circles.

A pill is made with a radius larger than half the box height, which is why 999px is used rather than a percentage — it stays fully rounded whatever the height. Percentages behave differently and are worth previewing before committing.

How to use the Border Radius Generator

  1. Choose linked or per-corner. Link all four corners, or unlink to set them individually.
  2. Drag the radius sliders. Adjust values and watch the shape update live.
  3. Try a preset. Use a preset for cards, pills or squircles as a starting point.
  4. Copy the CSS. Take the border-radius value into your stylesheet.

Border Radius Generator features

  • Individual corner control
  • Linked corner mode
  • Professional presets
  • Real-time preview
  • CSS code generation
  • Pixel precision control
  • Asymmetric shapes
  • Color customization
  • Copy CSS code
  • Mobile preview

Frequently asked questions

How does this border radius generator work?

Interactive tool for creating CSS border-radius values with real-time preview. Adjust individual corners (top-left, top-right, bottom-right, bottom-left) or use linked mode for uniform corners. Generates production-ready CSS code with pixel values and supports complex shapes like pills and squircles.

What border radius presets are available?

Professional presets include: None (0px), Small (4px), Medium (8px), Large (16px), Extra Large (24px), Full (999px for circles), directional presets (Top, Bottom, Left, Right), Pill shapes, and Squircle (asymmetric rounded corners) for common UI design patterns.

Can I create asymmetric border radius designs?

Yes! Unlink corners to set different values for each corner, creating asymmetric designs, pill shapes (left or right), custom shapes, and unique UI elements. Perfect for creating distinctive button styles, card designs, and creative interface elements.

How do I use the generated CSS code?

Copy the generated CSS code directly into your stylesheet. The tool provides clean, production-ready CSS with proper syntax: `border-radius: 8px;` for uniform corners or `border-radius: 8px 16px 4px 2px;` for asymmetric corners. Works in all modern browsers.

What are common use cases for border radius in web design?

Essential for modern UI design: button styling, card layouts, avatar images, form inputs, navigation elements, modal dialogs, tooltips, badges, and creating soft, approachable interfaces. Border radius improves visual hierarchy and user experience.

Does this support responsive design considerations?

Yes! Generate border radius values that work across different screen sizes. Consider using relative units (rem, em) for scalability, test on various devices, and ensure rounded corners maintain visual appeal at different sizes for responsive web design.