border radius in css - with all properties

 

When you are visiting some websites you notice how they are using slightly rounded corners for their button, form etc and some elements are circular. It is more appealing than a sharp corner.

For this we use border-radius. We give it a length(ex- px, em, rem) or percentage to make the corner circular and elliptical.

You can see it visually when you are using color border, background or it is an image. 

If you are giving one value to border-radius, it applies to all corner but if you are giving more value the story is different.

One value : All four corner

border-radius do not work like - top, right, bottom and left but it is like top left, top right, bottom right and bottom left.

Specifying two value - 

When you are specifying two values ex: 5px 10px, the first value applies in the top-left and bottom-right corner and the second value applies in the top-right and bottom-left.

When you actually see, it is setting the value in cross. 

Specifying three value -

The first value set the radius of top-left, the second value applies to top-right and bottom-left, and third value applies to bottom-right. Ex- 10px 5px 7em;

Specifying four value -

When you are providing four values, each one will be going to apply in the following way - top-left, top-right, bottom-right, bottom-left.

Ex- 50% 50% 0 50%;

Its default value is 0, it means no rounded corners. It is useful when you are using some CSS frameworks and you want your corner sharp. 

You can also provide the value with '/' to give your element a complex shape. 

Your values going to behave in following way - 

 border-radius : horizontal radius / vertical radius 
 

Before the slash your provided value will set the corner in horizontal radii, after the slash your provided value will set the corner in vertical length. 

And yes your optional one-to-four value on each side going to behave exactly how I explain above. 

For quick review -

 1-value : All four corner horizontal / All four corner vertical; 
 
 2-value : horizontal top-left and horizontal bottom-right, horizontal top-right and horizontal bottom-left / 
 vertical top-left and vertical bottom-right, vertical top-right and vertical bottom-left;
 
 3-value : horizontal top-left, horizontal top-right and horizontal bottom-left, horizontal bottom-right /
 vertical top-left, vertical top-right and vertical bottom-left, vertical bottom-right; 
 
 4-value : horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / 
 vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left; 

You do not have to specify same set on each side, you can use however you like. 

Border-radius properties 

 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
 

You can use these properties for one corner and also in animation. 

Example -

 border-top-left-radius : 10px;
 border-top-right-radius : 1em;
 border-bottom-right-radius : 30%;
 border-bottom-left-radius : 7px;

Note: in border-radius properties for elliptical shape you should use space between two value instead of slash ('/')

ex- border-top-left-radius : 3px 7px;