More Curved Corners: JavaScript and Images

Recently, I blogged about using CSS to curve corners on just about any element in your web design.

CSS is, after all, the preferred way to create presentation and style descriptions for HTML mark up. But because of browser inconsistencies, there is no simple, all inclusive way to create curved or rounded edges. Rather, the technique you choose can vary greatly depending on your target audience, function, or bandwidth goals.

If your project is aimed primarily at Web-savvy consumers, you may feel comfortable with a pure CSS solution—like that one I wrote about earlier here on GetElastic—since the vast majority of this audience will use a better and more modern Web browser like Mozilla Firefox or Google Chrome. But if you target audience includes user groups that are less comfortable with the Internet, or corporate clients who may be forced to use much older Web browsers, CSS alone probably won't suffice since Microsoft's Internet Explorer Web browser only supports the trailing edge of the CSS standard—parts of which were introduced more than ten years ago.

With these limitations in mind, I am going to share with you two other techniques that you can use to get curved corners for your web design. Neither of these solutions are as concise, reliable, or consistent as CSS, but again, the CSS solution will not work in IE, and these generally will with some tweaking.

Use Background Images

Christopher Schmitt's CSS Cookbook from O'Reilly media offers a great section on using background images to get a rounded corner effect on elements for your site design.

Schmitt generally divides the background image solutions into two sections—those that work for fixed-width columns and those that work with variable-width columns.

Images for Fixed-Width (or Fixed-Height) Columns

Imagine that you want a single rounded corner on a  box to use as a merchandising section on an ecommerce website—something like the "Find the Perfect Gift" section on the Toys R Us home page.

To get this effect, you need just one image and some relatively simple HTML markup. Since the Toys R Us example has plain white field behind the rounded corner, I did not make any portion of my example background transparent. My personal preference is to use a PNG, which in this case would have actually produced a smaller file size—490 bytes as a PNG versus 625 bytes as a JPG—but IE does not properly render colors for PNG, which would have made my image a different color than desired. Thus, the image below.

Fixed-width example with one curved corner

Next, I use CSS to add the background image and a background color. Notice that I am also adding padding to the box.

body {margin: 100px; color: #fff; font-weight: bold;}

#box {background: #237cac url(background-img.jpg) no-repeat; min-height: 50px; padding: 10px;}

The padding is essential to avoid having text positioned over the curve. In the image below, I have made the text black and removed the padding to demonstrate the point.

body {margin: 100px; color: #000; font-weight: bold;}

#box {background: #237cac url(background-img.jpg) no-repeat; min-height: 50px; padding: 0px;}

Similarly, if I the element has both a set column width and height, I can use a single image to produce a rounded corner effect. In this example, I will curve all four corners, but restrict the width and height of the element. The HTML mark up is identical except for a minor change to the sentence, only the background image and the CSS changes.

Here are the style changes.

body {margin: 100px; color: #fff; font-weight: bold;}

#box {background: #000 url(background-img2.jpg) no-repeat; height: 210px; width: 160px; max-height: 250px; max-width: 200px; overflow:hidden; padding: 20px;}

Of course, this solution will not work, if the column height is not exactly fixed.

If the column-width is set, but the column height is variable, I can use a two image solution. For this rounded corner fix, I will create two background images that will represent the top two corners and the bottom two corners respectively.

In the HTML mark up, I need to add a new element box-wrapper. I need this additional element because I want to assign to separate background images, thus I need two separate page elements.

Fixed-width example with four curved corners

I also need to make changes to the style sheet.

body {margin: 100px; color: #fff; font-weight: bold;}

#box {background: #000 url(background-img3b.jpg) no-repeat bottom; width: 160px; max-width: 200px; overflow:hidden; padding: 0 20px 40px;}

#box-wrapper {background: #000 url(background-img3a.jpg) no-repeat top; width: 200px;  overflow:hidden; padding: 50px 0 0;}

Noticed that I have positioned the backgrounds at the bottom and top of each element. Also, I have added extra padding to avoid having the backgrounds overlap.

If my column width is variable, but my column height is fixed, I can use a similar technique, wherein background images are positioned right and left rather than top and bottom. In this way, the element's width can change with screen size of dynamic content. When this technique is applied to an element with a variable width, but a fixed-height it is referred to as a sliding door.

While I have shown you several examples of how to use images to create a rounded corner effect that will work in IE, there are several variations on this theme. Each variation, will need a bit of tweaking. I do want to mention that it is also possible to create background images that represent that outside of the curve as well as the inside of the curve.

Curved Corners with JavaScript

If creating and managing numerous background images is not appealing, and if you still want curved corners in Internet Explorer, there are several good JavaScript solutions that may get the job done for you.

In general, these JavaScript solutions work by adding a number of small (sometimes one pixel) elements to the page. These elements are arranged so that they create a "mountain top" curve, which if examined very closely looks more like a set of stairs than a curve. Fortunately, people tend to perceive these tiny steps as a curve.

Implementing a JavaScript solution is typically very easy. I personally use Cameron Cooke's CurvyCorners solution. CurveyCorners keys off of the Webkit CSS border-radius attribute, and when a browser does not support the CSS, it rounds the corners for you. It does, of course, require a browser to be JavaScript enabled.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.