How to round div corners using CSS

Did you know that you can assign different radiuses of curvature to different edges in an HTML div element?

Today, I’d like to show you how to easily round corners in HTML elements using CSS. 😊

Before we start, I would highly recommend you to check out the runnable examples for the solution on our website:
How to round div corners using CSS

Final effect:

CSS — div with rounded corners example

There are several ways to round element depending on which corners you want to round.

Round each corner with the same value

In this solution, we use border-radius property with one value to round each corner of the div with the given value.

Practical example:

You can run this example here

Round diagonally opposite corners

In this solution, we use border-radius property with two values to round diagonally opposite corners of the div with two different values.

Practical example:

You can run this example here

Round each corner with a different value

In this solution, we use border-radius property with four values to round each corner of the div with a different value, clockwise.

CSS — rounded corners with 4 border-radius property values (clockwise direction)

Practical example:

You can run this example here

Custom rounded corners

In this solution, we use border-radius property with three values to round corners of the div in the following way:

• first value describes top-left corner — 20px radius,
• second value describes opposite top-right and bottom-left corners — 45px radius,
• third value describes bottom-right corner — 30px radius.

Practical example:

You can also manually specify which corner you want to round with given value like this:

You can run this example here

Circle div example

We can also use border-radius property with percentage values. In this solution I've set the property value to 50% to make a circle div.

Runnable example:

You can run this example here

If you found this solution useful let me know in the comment section or just leave a reaction 👏.
Thanks for reading and see you in the upcoming posts! 😊🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you’re looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥