Add border radius to element CSS

To add border-radius on HTML element you can use 'border-radius' property of CSS.

/*add radius all sides*/
.element {
    border-radius: 10px;
}
/* 
add radius specific sides 
order - top-left top-right bottom-right bottom-left
*/
.element {
    border-radius: 20px 10px 30px 20px;
}

In the code snippet, we are adding a border radius of '10px' on all four sides. You can also add border-radius to an element in percentage.

.element {
   border-radius: 10%;
}

Make an element circular using the border-radius property

To make an element circular using the border-radius property you can assign a 50% value to the border-radius property.

.element {
   height: 100px;
   width: 100px;
   border-radius: 50%; /* This will make element circular */
}

Was this helpful?