How to make a div with rounded corners

Using the CSS border-radius property, rounded edges can be added to divs. The border-radius attribute is used to provide an HTML element with rounded corners.

Each corner’s degree of rounding can be independently set, or all corners can share the same value.

The following is an illustration of how to make a div with rounded corners:

To make a div with rounded corners we will have to use the border-radius attribute to that div. you can accomplish this using CSS classes, which you can reuse throughout your website. Let’s say the class name you want to use is rounded-corner, here is how HTML will look:

<div class="rounded-corner">
...
....
</div>

and here is how CSS will look:

.my-div {
	border-radius: 5px;
	width: 100px;
	height: 100px;
    background-color: yellow;
}

This will produce a blue div with rounded corners that are 100px in radius and 100px in size. You can choose from px, em, rem, %, etc. as your border-radius unit.

Here is how the output will look based on the above example: