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.

Privacy

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