Skip to main content

CSS Rounded Corners

You can create rounded corners for an element using the border-radius property. This property specifies the radius of each corner of the element's border.

As an example:

Editor

Loading...

In this example:

  • The border-radius property is set to 10px, which creates rounded corners for all four corners of the box.

CSS border-radius - Specify Each Corner​

You can also create different radius for each corner by specifying multiple values for the border-radius property.

As an example:

Editor

Loading...

In this example:

  • Each corner has a different radius value specified, which creates a unique shape for the box.

CSS border-radius - Shorthand Property​

You can also use the shorthand notation for the border-radius property to set all four corners at once.

As an example:

Editor

Loading...

In this example:

  • The first value sets the top-left corner, the second value sets the top-right corner, the third value sets the bottom-right corner, and the fourth value sets the bottom-left corner.