The rounded corner of an element is set on a web page using the border-radius property in CSS3. You can set the shape of the rounded corners with ?

• length ? Set shape of the corners in length units. Default is 0. Read about length units

• % ? Set the shape in percentage

Let us see two examples to set rounded corners for a container and an image.

Create rounded corners

We have two divs here to show the difference between a normal and a container with rounded corners ?

Rounded Corners
Default corners

Example

The following is the code for creating rounded corners ?

   


   
CSS3 rounded corner example
   
Rounded Corners
   
Default corners

Rounded corners for an image

The rounded corners can also be set for an image. The image is set using the background property ?

#mydiv {
   background: url(https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg);
   border-radius: 30px;
   padding: 20px;
   width: 150px;
   height: 150px;
}

Example

The border-radius property is used to set the rounded corners ?

   


   
Rounded corners for an image
   
The below image is having rounded corners.