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

IE hack for CSS padding property

It is very frustrating sometimes when we do everything right and by the book but still our page will look different in one browser and totally different in another. Here is a very simple hack to implement your CSS padding property perfect in all the versions of Internet Explorer.
Say you have an image or a text that is being displayed with 10 pixels top-padding on your page. It looks fine on other browsers but wouldn’t implement properly in IE7 (or some other versions of IE). It is also known as double padding problem because your IE displays double padding than originally implemented. To remove that fault you can write your css properties as follows:

.yourClass
{
      padding-top: 10px;
     *padding-top: 10px; // Read by IE7 and earlier versions
     _padding-top: 10px; // Read by IE6 and earlier versions
}

Properties prefixed by asterisk (*) will be read by IE7 and earlier versions; prefixed by underscore will be read by IE6 and earlier versions and your padding will be implemented perfectly.
Before using IE hacks it is advisable to make sure that you are not making any mistakes in your coding. If everything is working alright and coded perfectly and still you don’t get desired output, then only go for hacks.

Happy coding. 🙂

Posted in CSS. Tags: . 1 Comment »