Rounded Corners CSS. IE Rounded Corner CSS

Rounded Corners CSS

Many times we have to use the rounded corners in our projects while developing websites or applications. Lots of web designers are struggling with the corner Images to do it. Using image are old and tricky but if i say we can do it without using the images it is possible …. will you trust me. Yes its true we can round corners without using the images. What we have to do is we have to use CSS 3 Tags. Problem is all the browser’s will not support it. But good news most of the modern browsers support it. Making Rounded Corners CSS is given below use it.

Browser support

1. Chrome

2. Firefox

3. Opera

4. IE 9

How to use

In the above code we made a CSS Class and we will use it in our Div by just adding this class..rounded {
    -moz-border-radius: 10px; // For Firefox
    -webkit-border-radius: 10px; // For Chrome
    -o-border-radius: 10px; // For opera
}

<div class="rounded"></div>

Now you will see you div is having the rounded corners. Check this code with all the browsers.

But still it will not work with the IE for

IE support we have to add some more code to our CSS and HTML. First of all we add our border radius code to CSS. border-radius: 12px 5px 12px 5px; still it will not work we have to add a META entry to our HTML code that is 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

So our final code will look like this.

.rounded {
    -moz-border-radius: 10px; // For Firefox
    -webkit-border-radius: 10px; // For Chrome
    -o-border-radius: 10px; // For opera
 border-radius: 10px;
}

Add this code to your HTML page

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Thats it now check your IE browser it will run it in IE. But remember it will not work in IE 8, 7 , 6.