Border Radius Generator

Border Radius Generator | CSS Rounded Corners Tool

Border Radius Generator

Create perfect CSS rounded corners with real-time preview

0px 200px
px

CSS Border Radius Explained

The CSS border-radius property defines the radius of an element's corners. It's used to add rounded corners to elements and can create everything from subtle curves to perfect circles.

Syntax:

border-radius: top-left top-right bottom-right bottom-left;

Property Values:

  • Single value - Applies to all four corners (e.g., border-radius: 10px;)
  • Two values - First applies to top-left and bottom-right, second to top-right and bottom-left
  • Three values - First to top-left, second to top-right and bottom-left, third to bottom-right
  • Four values - Each value applies to a different corner (top-left, top-right, bottom-right, bottom-left)
  • Percentage values - Creates elliptical corners (50% makes a perfect circle/ellipse)

Advanced Usage:

You can define horizontal and vertical radii for each corner separately to create elliptical corners:

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

The values before the slash are the horizontal radii and the values after are the vertical radii.

Browser Support:

The border-radius property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It works in Internet Explorer 9 and later.

Border Radius Generator - Web design tool for developers and designers