Pure CSS-based "Perfect" Rounded Corners

| | TrackBacks (0)

If you view this home page in Firefox (or a browser other than IE or Opera), you'll notice I added some rounded corners.

The rounded corners of this box use graphics to achieve its effect (1 in each corner). Not as cool as pure-CSS. But that's why you can see these rounded corners in IE & all browsers. This box will expand and shrink (down-n-up) as necessary to accommodate text inside, as its width is fixed (to 205 pixels).

Been reluctant to spend much time focusing on site styling, preferring rather to concentrate on generating » content.

In the world of cars, for example, I've always preferred the spartan cockpit of a Porsche to the bells & whistles you find sitting in a corvette. Tho admittedly, that's just my druthers.

My point » function should never take a back seat to form.

I've considered adding rounded corners many times before. Countless techniques exist. But they always seemed a kludge. (Andy agrees.) So I never felt it worth adding the extra markup necessary.

Techniques that use graphics to achieve their effect involve inserting additional HTML elements that are otherwise unnecessary, because current CSS standards (v2.1) allow only 1 background image per element (while each box has 4 corners). Future versions of CSS (v3.0) will support 8 images per element (for this very reason).

This approach has 2 main problems. First, adding (otherwise) unnecessary markup goes against all that is holy to the Web Standards movement, which touts the tenent of 'Semantic Markup' as one of its pillars.

••• today's entry continues here below •••

[ Yet it seems as if the people who preach the gospel of Web Standards are the same ones who devise & espouse techniques for employing rounded corners that violate the doctrine of Semantic Markup. ]

Problem #2 » Each additional graphic used involves another call to the server, yet adds no value to a page (other than to round the corners of a box .. an effect of questionable value to begin with).

Multiply these additional server-calls times the number of boxes per page, and thousands of pages-per-site, and you can see that adding rounded corners to your pages can affect the load on a server.

Today however, I found a technique I think I can live with. It's called » Perfect Rounded Corners with CSS (which uses no graphics, nor Javascript). The additional HTML markup required is minimal (simply add a class attribute), and the CSS is reasonable.

I was surprised to discover that IE.8 does not yet support this code (CSS-based). When it does tho, we'll be here, ready & waiting.

I also added some of these same (CSS-based) rounded corners to the new Dreamweaver Template guide. But again, you'll need Firefox or SeaMonkey (or some other browser) to see what I've done there.

BTW .. I've really been making mad use of the new template I created. Must've edited it a dozen times already. In each case, the dependent child-pages were all updated without a hitch. (Way cool.)

One more thing » I also tried SpiffyCorners, which I noticed are used in the new forum template .. but couldn't get them to work correctly here. (Not sure why.) Spiffy involves the use of quite a bit of extra markup, which I didn't like.

Now all we need is for Internet Explorer to catch up to where we're at.

For more along these lines, here's a Google search preconfigured for the query » rounded corners

« Previous Rad entry ||| NEXT Rad entry »

0 TrackBacks

Listed below are links to blogs that reference this entry: Pure CSS-based "Perfect" Rounded Corners.

TrackBack URL for this entry: http://radified.com/cgi-bin/xmt4/mt-tb.cgi/137

About this Entry

This page contains a single entry by Rad published on May 20, 2009 3:16 PM.

How to Use Templates in Dreamweaver CS4 to Help Develop & Maintain your Web Site was the previous entry in this blog.

More Website Authors Including a Mug Shot is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.