CSS Border Radius Generator
How to Use
- Adjust the slider or type a value to set the border radius for each corner.
- Toggle "Link corners" to change all corners together or independently.
- Select a unit (px, %, rem, em) for the values.
- See the live preview update in real time.
- 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.
FAQ
What is the difference between border-radius and border?
border-radius controls how rounded an element's corners are, while border sets the width and color of the edge line — they are separate properties. This tool generates border-radius values only.
Is the CSS I generate sent anywhere?
No. Both the live preview and the CSS generation happen entirely in your browser, and your values and output are never sent to or stored on any server.
When should I use px, %, rem, or em?
px gives a fixed rounding, % is relative to the element's size (50% on a square makes a circle), and rem or em scale with font size. rem or em are handy for responsive layouts.
Can I set each corner to a different value?
Yes. Turn off "Link corners" to set the top-left, top-right, bottom-right, and bottom-left corners independently and create asymmetric shapes.
Can it create elliptical corners with different horizontal and vertical radii?
This tool applies a single radius per corner. It does not support the slash syntax for elliptical corners that specify separate horizontal and vertical radii.