CSS-Border Radius Property

Hi Everyone! Today I am going to talk about a property which is kind of based on one of the properties I discussed earlier.

Any guesses to which property it relates to?? take your time….

download

 

It relates to the Border property as the name suggests. Kudos to the ones who guessed it right!!

Let me give you a short recap on what the Border Property was all about. The Border Property was used to define the boundaries of an element and give a sense of distinction if two elements are aligned close to each other. And we can give a type, width and a color to a border.

Hope this has refreshed your memory! Now let’s dive into the new property which we are going to learn today-The Border Radius Property.

The Border Radius Property is obviously derived from the Border Property and it means manipulating the corners of the border of an element. To describe it in a different way, it means changing the shapes of the corners from pointed to curved. And as you increase the radius, it tends to become more curved. This is done in order to make it look good and attractive.

To begin with let’s take an example-

So today for a change I have a Purple Box instead of the Yellow or Blue which I normally choose!

Capture

Looks good right??

Now let’s apply a border of width 20 pixels , type solid and color ?? I was searching a for a unique color which would match with purple and see what I found, the color is called Lavender grey!!

Let’s see how it looks!

Capture

And Now that we have the border, let’s apply the border radius property. Let’s see what happens!!

Capture

See the transformation?? Notice all the corners are curved since I applied a 30 pixel border-radius property.

This is what I wrote-

border-radius:30px;

Not too complicated, I just applied a radius value for the property.

Now let’s define it-

border-radius: length;

where length is the value of the radius. It is normally in pixels but it can be in other units as well like ems. We can discuss this unit some other day.

Now, like the previous properties-Margin, Border , we can selectively apply the border-radius to certain corners in case we don’t want it to be applied to all the corners of the element.

So what we have is-

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

Let’s take an example where we selectively apply the border radius property to the top right and bottom left corner of the element.

We are again starting with the purple box and the Lavender grey border.

Capture

Now that we have the box let’s apply the border-radius property to the top right and bottom left corner of the box.

Capture

I applied a 20 pixel border radius property to the top right and bottom left corner.

This is what I wrote.

border-top-right-radius:20px;
border-bottom-left-radius:20px;

Any resemblance to any particular object you have seen. Some might say it looks like a leaf and I don’t disagree since I have studied Biology all throughout school.

Hope you had some fun with the shapes and colors we talked about today. Tomorrow is another day and it will be a new topic.

Bye for now

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s