Search code snippets, questions, articles...

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

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

css border radius
Was this helpful?
Programming Feeds
Learn something new everyday on Devsheet