CSS Border Radius Property – How and Why

CSS Border Radius Property – How and Why
CSS Border Radius Property – How and Why

CSS (Cascading Style Sheets) now lets you make your sharp corners round and beautiful. Since the border-radius property was included in CSS3, giving corners a round shape has become considerably easier. Before that, we had to make four slices of images with round corner for top-left, top-right, bottom-right and bottom-left corners respectively. In this tutorial, I’m going to show you how you can use CSS border-radius property in your div elements. Say, we’ve a division with the class name radius and we want to give its corners a round shape. What we need to just apply is border-radius property on it via CSS. After applying border-radius property on the div element, the CSS syntax will look something like this:

The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left. Are you getting confused? Please don’t, I’ll explain further. So the very first 10px value is for top-left corner, second 10px is for top-right corner, third 10px is for bottom-right corner and the fourth 10px is for bottom-left corner. You can change the values as per your need or you can provide random values from top-left corner to bottom-left corner. There is also a shortcut to give values to border-radius property if all four corners’ values are same. The shortened CSS syntax will look like this:

Here are a few examples of border-radius property and how you can apply them on your div elements:

Example: 1

is equivalent to: 

Example: 2

is equivalent to: 

It’s time now, to have some fun with border-radius. Play with your codes to understand it better. Use it in your next project to save time; after all, time is money. Good luck and have fun.

Comments

Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...