CSS Border Radius Generator

Visually generate CSS code for rounded corners on elements.

Tools
CSS Border Radius Generator
Add to Favorites Remove from Favorites Share on Facebook Share on X

Use the sliders below to adjust the border radius for each corner, or use the "All Corners" slider to set them uniformly. The CSS code will be generated automatically. Click "Get Code" to view the generated CSS and example HTML.

Radius Options

CSS Code

Apply this CSS rule to your element.

Copy

Example HTML

Example usage in HTML.

Copy

About the CSS Border Radius Generator

Easily create rounded corners for your HTML elements with our interactive CSS Border Radius Generator. This tool provides sliders to visually adjust the curvature of each corner independently or all corners simultaneously.

What is CSS Border Radius?

The CSS border-radius property allows you to round the corners of an element's outer border edge. You can set a single value to apply the same radius to all four corners, or provide multiple values to control each corner individually. This is commonly used for buttons, cards, images, and other container elements to give them a softer, more modern look.

How to Use This Tool

  • Use the "All Corners" slider to set a uniform radius for all four corners at once.
  • Alternatively, adjust the sliders for "Top Left", "Top Right", "Bottom Right", and "Bottom Left" to set specific values for each corner.
  • The preview box on the right will update in real-time to show the effect of your changes.
  • Click the "Get Code" button to reveal the generated CSS border-radius rule and example HTML.
  • Copy the CSS code and apply the class (e.g., .rounded-element) to your HTML element.

This generator simplifies creating complex rounded shapes and ensures you get the exact CSS code you need quickly and easily.

Learn more about the border-radius property on MDN Web Docs.

Tools