How to Make CSS3 Rounded Corners Work in Internet Explorer
One of the most aesthetically pleasing CSS3 selectors available is the one that adds curves to Web page objects. CSS3, the latest incarnation of CSS enables site developers to transform rectangular corners on Web pages into stylish rounded corners. Internet Explorer versions greater than version 8 now support this new CSS feature. Add it to any webpage on your site by adding a few lines of CSS3 code to your HTML document.
Other People Are Reading
Instructions
-
-
1
Open an HTML document and add the code shown below to the document's body section:
<div class="rounded">
</div>This code creates a div that references class named "rounded."
-
2
Locate the document's head section and paste the following code into that section:
.rounded
{
border-radius: 6px;
background-color: Yellow;
height: 100px;
width; 100px
}This code creates the CSS class referenced by the div. Its value is six pixels in this example. Such a small value produces a subtle rounded effect that is barely noticeable. The remaining three attributes add a background color to the div and make it 100 pixels tall and 100 pixels wide. These attributes exist to allow you to see the div when it displays on the webpage. Remove these three attributes later after testing the code.
-
-
3
Save your document and view it in any version of Internet Explorer greater than 8. A yellow div box with rounded corners will appear on the webpage.
-
1
Tips & Warnings
Increase the border-radius value to make the borders rounder.
