In this section, we will learn what the border-radius property is and how to use it in CSS.
Click here to run the example of border-radius property.
CSS border-radius Property Definition and Usage
By default, borders of an element have sharp corners. But this is the default behavior and we can change the shape of these corners and create a round one of needed.
This is done with the help of a CSS property called `border-radius` by which we can style corners like creating round corners or other shapes for elements.
CSS border-radius Property Syntax
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
border-radius: value1 value2 value3 value4;
When we set 4 values for the border-radius property: the first value sets the radius of the top left corner, the second value sets the radius of the top right corner, the third value sets the radius of the bottom right corner and the last value sets the radius of the bottom left corner.
border-radius: value1 value2 value3;
When we set 3 values for the border-radius property: the first value sets the border radius of the top left corner, the second value sets the radius of the top right as well as bottom left corners, and the last value sets the radius of the bottom right corner.
border-radius: value1 value2;
When we set 2 values for the border-radius property: the first value sets the border radius of the top left and bottom right corners and the second value sets the radius of the top right and bottom left corners.
border-radius: value1;
When we only set one value for the border-radius property: the radius of all the corners of an element will be set to that value.
CSS border-radius Property Value
The value of the border-radius property is a number with any relative or absolute units supported in CSS.
Example: border-radius property in CSS
See the Pen border-radius property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Example: CSS rounded corner
See the Pen CSS rounded corner by Enjoy Tutorials (@enjoytutorials) on CodePen.
Example: div with rounded corners
See the Pen div with rounded corners by Enjoy Tutorials (@enjoytutorials) on CodePen.
