Chrome Extension

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;
}
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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 */
}

Search Index Data (The code snippet can also be found with below search text)

css border radius
Was this helpful?
0 Comments