Your data is never sent to a server or stored anywhere. All processing happens in your browser.

CSS Border Radius Generator

Unit
All Corners 8px
Preview
CSS Output
border-radius: 8px;

How to Use

  1. Adjust the slider or type a value to set the border radius for each corner.
  2. Toggle "Link corners" to change all corners together or independently.
  3. Select a unit (px, %, rem, em) for the values.
  4. See the live preview update in real time.
  5. Copy the generated CSS with the copy button.

CSS Border Radius

The CSS border-radius property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or specify each corner individually to create asymmetric shapes. Common uses include rounded buttons, cards, avatars (50% for circles), and decorative UI elements.

Syntax Guide

  • 1 value (e.g., 8px): All four corners are the same.
  • 4 values (e.g., 10px 20px 30px 40px): Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left.
  • Percentage values (e.g., 50%): Relative to the element's dimensions. 50% on a square creates a circle.

Use Cases

  • Buttons: Apply consistent rounding to create pill-shaped or softly rounded buttons that feel clickable.
  • Avatars and profile images: Use 50% border-radius on square images to create perfect circles for user avatars.
  • Cards and containers: Add subtle rounding (4-8px) to card edges for a modern, approachable look.
  • Modals and dialogs: Round the corners of overlay panels to visually separate them from the page content.
  • Tags and badges: Create rounded labels for categories, status indicators, or notification counts.

Design Tips

  • Use consistent border-radius values across your design system (e.g., 4px for small elements, 8px for cards, 50% for circles).
  • Avoid mixing too many different radius values on the same page — it looks inconsistent.
  • For responsive layouts, consider using rem or em units so the rounding scales with font size.
  • A large border-radius on a rectangle creates a pill shape; on a square it creates a circle.
  • Use the browser devtools to experiment with border-radius values in real time before committing to code.

Privacy

All processing happens in your browser. No data is sent to any server.