Blog

This CSS property defines the rounded corners and borders around an element, tags, or div. It specifies the radius of an element’s corners. It works as a shorthand for the border top-left, border top-right, border bottom-right, and border bottom-left radius. It provides the corners of an element’s border a rounded look.

Using the border-radius, we may declare the boundary for the box’s four corners in a single declaration. This property’s values can be expressed as percentages or lengths.

div{  
text-align : center;  
border: 2px solid red;  
border-radius: 25px;  
}

border-radius individual corners value

border-top-left-radius

It is applied to set the top-left corner border-radius. Example:

div{  
text-align : center;  
border: 2px solid red; 
border-top-left-radius: 25px;    
}

border-top-right-radius

It is applied to set the border-radius for the top-right corner. Example:

div{  
text-align : center;  
border: 2px solid red;  
border-top-right-radius: 25px;    
}

border-bottom-right-radius

It is used to set the border-radius for the bottom-right corner. Example:

div{  
text-align : center;  
border: 2px solid red;  
border-bottom-right-radius: 25px;    
}

border-bottom-left-radius

It is used to set the border-radius for the bottom-left corner. Example:

div{  
text-align : center;  
border: 2px solid red;  
border-bottom-left-radius: 25px;    
}

If the bottom-left value is removed, the top-right value will take its place. If the bottom-right value is removed, the top-left value will take its place. Similarly, if top-right is removed, top-left will take its place.

How to add CSS to a Web page

See what happens when we give this attribute one value, two values, three values, and four values.

The border-radius property will set all corners to the same value if only one value is provided.

div{  
text-align : center;  
border: 2px solid red;  
border-radius: 25px;    //one value
}

When we specify two values, the top-left and bottom-right corners will be set by the first value, and the top-right and bottom-left corners by the second value.

div{  
text-align : center;  
border: 2px solid red;  
border-radius: 15px 50px;    //two values
}

When we apply three values, the top-left corner will be affected by the first value, the top-right and bottom-left corners by the second value, and the bottom-right corner by the third value.

div{  
text-align : center;  
border: 2px solid red;  
border-radius: 15px 30px 50px; //three values   
 }

Similar to the above, if this property has four values, the top-left radius will be determined by the first value, the top-right radius by the second, the bottom-right radius by the third, and the bottom-left radius by the fourth.

div{  
text-align : center;  
border: 2px solid red;  
border-radius: 30px 60px 1px 10px;//four values    
}

Property values

length: It defines how the corners will be shaped. Using length values, it indicates the radius’s size. The default setting is 0. Negative values are not allowed.percentage: It indicates the radius’s size within this measure. Additionally, negative values are not allowed.

Using the slash (/) character, we can provide separate horizontal and vertical values. For the horizontal and vertical radius, respectively, the values before and after the slash (/) are used.

The slash (/) symbol is used in the example that is shown below.

div{  
text-align : center;  
border: 2px solid red;  
border-radius: 30px/60px;    
}

Circle Shape using border-radius Property

div{  
width : 100px;  
height : 100px;  
border: 2px solid red;  
border-radius: 50%;  
}

In the above code, we create a div to make a circle shape. To create a circle, first we set the width and height 100px of our div and after that we set border 2px solid with the color red and add a border-radius 50% border to make it a circle to the div element.

How To Write Css Code Syntax of CSS

Here it’s hollow. If we set the background color, then it looks like:

Conclusion

Border-radius Property is very useful in css. We can design different shapes using it. The border-radius makes our website look great to make the elements around the corners round. I hope you have cleared all the concept of border-radius property after reading this blog. If you have any questions or problems, then don’t forget to comment below.

Thankyou for reading!

Written by : Vipin