Understanding CSS border-radius

In this tutorial I am going to explain about the CSS border-radius property. You might have used the basic CSS border-radius property, which is like border-radius: 5px;. But since I am writing this tutorial for the beginners, I shall explain every bit of it.
Some newbie designers always end up learning the basic border-radius property, because they are good to go with that, but if we experiment little bit more with the same we can actually design various shape with it.

The basic syntax for border-radius

border-radius: length/%/initial/inherit;
          OR
border-top-left-radius: length/%/initial/inherit;
border-top-right-radius: length/%/initial/inherit;
border-bottom-right-radius: length/%/initial/inherit;
border-bottom-left-radius: length/%/initial/inherit;

Different border-radius styles

Following are the different border-radius styles with the required CSS. If you don't have any idea about how to use this designs in a CSS style sheet, then take the help of this border-radius codepen

border-radius style 1

This shape is created with the basic border-radius property.

border-radius: 20px;

border-radius style 2

Here we are giving different border-radius values for the four corners, which are top left, top right, bottom left and bottom right.

border-top-left-radius:50px;
border-top-right-radius:5px;
border-bottom-right-radius:50px;
border-bottom-left-radius:5px;

border-radius style 3

In this style we are creating a semi-circle, by setting the border-radius of top left and top right corners.

border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;

border-radius style 4

Here we are using the basic border-radius syntax to create an ellipse.

border-radius: 100%;

border-radius style 5

The border-radius syntax used in this style, is the highest styling syntax for border-radius. It takes multiple border-radius length for each corner, earlier we have used only one length for each corner. Take the help of the below screenshot to understand how the length works in this syntax.

border-top-left-radius: 150px 70px;
border-top-right-radius: 70px 30px;
border-bottom-right-radius: 150px 70px;
border-bottom-left-radius: 70px 30px;

Wrap Up

I would prefer you to learn the border-radius style 5 the most, because it gives you the concept of creating various shapes. Create as many shapes as you can, but don't forget to provide a link below. We are always interested to see our readers creations.

Codeflaps