Page 1 of 3 It used to be that to make rounded corners you had to include background images for every browser. Now some browsers allow you to create rounded corners without images: using only CSS.
The CSS3 recommendations include the border-radius property. While CSS3 is still just a recommendation, it has been in the works for long enough that most browser manufactures have implemented some of the CSS3 features. Most browsers, but no versions of Internet Explorer, including IE8.
Recently, for the sites I create, I decided that it was time to stop catering to Internet Explorer. I still want my sites to look good in all browsers, but I don't want to cater my HTML, adding extra markup, simply because Internet Explorer has not moved forward with the times. Now I write simple, standards compliant HTML. I use CSS to create rounded corners in browsers that support native rounded corners. I include CSS to make the buttons look decent, though not necessarily the same in all browsers. Then, with a little JavaScript and CSS magic, I add the old fashioned corners for non-modernized browsers.
This method requires simple, semantic HTML for a "Call To Action" (CTA) link, with a class. This is code that works in all browsers and all devices:
<a href="yourlink.html" class="cta">Buy Now</a>
Listing 1: HTML for link
The next step is to create CSS for our rounded corner link. With CSS we create native rounded corners for browsers that support border-radius. We include CSS that will make the button look similar, but with rectangular corners, in non-supportive browsers. We also future proof our code: including CSS for rounded corners for Presto 2.3, which is expected to be the next version of Opera (we're currently at 10). We also include border-radius, which is the non-browser, suggested standards compliant method of including border-radius:
.cta {
background-color:#FFFF66;
border: 1px solid #FFCC00;
color: #000000;
-webkit-border-radius: 5px; /* for Safari and Chrome */
-moz-border-radius: 5px; /* for Firefox */
-o-border-radius: 5px; /* when Opera Presto 2.3 or later is released */
border-radius: 5px; /* future proofing for when border-radius is supported */
padding: 4px 10px;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
Listing 2: CSS for button
If you take a look at the test file in a browser, you'll see one of the following, depending on whether your browser supports native rounded corners:
Image 1: Links in CSS3 supportive browsers (on left), and as it appears in non-supportive browsers (on right). Test your browser
The rounded corners will display in Firefox, Safari and Chrome, but not in Opera (including Opera 10.00) or Internet Explorer (including IE8). While our link doesn't have rounded corners in non-supporting browsers, the link is at least styled, and should be an acceptable presentation in the rare occurrence of someone having JavaScript turned off.
This might be good enough for your project: good looking links, with the links having rounded corners in some browsers. While this might be good enough, let's make our links have rounded corners in Internet Explorer too.
Keywords
javascript, internet explorer, rounded corners, border-radius, sliding door
