Create awesome rounded corners in css border-radius property

Here I am showing a simple trick to create rounded corners for a particular box using css. You can give border-radius to each corner of a box independently. In this post I will show how we will do that.

html file

<div id="rounded_box"></div>

css file

#rounded_box {
       width: 200px;
       height: 200px;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
       border-bottom-left-radius: 6px;
       border-bottom-right-radius: 6px;
}

In this way you use this border-radius property in most flexible way. Let me show the general equivalent styling for the above styling.

css file

#rounded_box {
       width: 200px;
       height: 200px;
       border-radius: 6px;
}