Make Rounded Corners With CSS

Hello friends,

Before few days while developing html page with css, we had a requirement to apply border with rounded corners.

To fulfill our requirement we searched the web and got a solution, which is as under.

In the CSS3 there is a standard property named “border-radius” to apply border with rounded corners.

The border-radius property is supported by all of the major browsers like: safari, chrome, internet explorer 9, opera and firefox.

And it is easy to apply border-radius property to element, just like other properties.

For Example:


.applyBorder {
    border-radius: 12px;
}

The above example gives unique rounded corner value to each four corners of element.

An individual border radius can also be applied.


.applyBorder {
    border-top-left-radius: 7px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 8px;
}

And the syntax of sort hand border-radius is as under:


.applyBorder {
    border-radius: 12px 5px 12px 5px;
}

Now it is good to have ability to apply border with rounded corners with css, because it saves the time to load images and in handling requests to server.

Hope this will help you.

Thanks.

Advertisements

Speak Your Mind

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

%d bloggers like this: