The Power of CSS Border-Radius

Certain CSS properties get overshadowed by others, due to the simplicity of their function. As a programmer, I do not know what we would have done without the border-radius function. Do you think about that too?

I learnt how to use the border-radius when I was a CSS newbie, trying to make a circle-like avatar for my portfolio website. It got me thrilled to realize that I needed just a property, which is border-radius. As a matter of fact, the first tip I give to any newbie I interact with is “use border-radius for your curves!”

The Border-radius allows you to create curves or rounded corners around element borders. With border radius, you can simply create a circle shape, rectangle & square shapes with curved edges, picture avatars and so many other curvy designs. It truly beautifies the design of the web which is the general essence of CSS. Let’s learn how to use the border-radius property!

To create a circle

By simply creating an empty div, you can style it to become a circle using CSS. You can also give it a class name to enhance readability when styling.

By merely giving the div a height, width and background-color property, it creates a square shape as shown below;

To make it a circle, simply add the border radius property!

Now we have our circle. To create a rectangle with edges

There you have it. Because a rectangle has different height & width, you make sure to implement it.

To create a circle avatar,

Here after inserting an image, use border- radius to style it and you will get a curved circle avatar. Note that you can use all CSS units to define your border radius e.g px, %, rem, em, vh, vw, etc .

That is all I have for you today on border-radius. I Hope you enjoyed this article as much as I enjoyed writing it.

Kindly follow me here and on twitter @jovialcoderr.