I guess I must still be pretty new to CSS--for the life of me I can't figure out
how they managed get these corners to show as rounded:
http://groups.yahoo.com/
In the code we see this:
<span class="corner-bottom"><span class="corner-left"></span></span>
In the CSS (I've not looked) there will be background-image rules to
show a single corner image in each of these spans.
Yahoo write some very nice code (sometimes). They're one of the "big
four" (Google, eBay, Amazon, Yahoo) that have enormous budgets to get
things right and must make their pages work across a very wide range of
browsers. This often involves "clever" code that's downright ugly, but
"works" provided you understand its intricacies. Old programmers will
recognise the pattern and groan.
OTOH, MSN hack any old crap together and call it a page.
The nice thing with Yahoo's approach is that it's quite simple HTML,
it's a lightweight addition to the page that doesn't complicate the
structure of the rest of it (as many pure CSS-based round corner schemes
do). The clever part is that it degrades particularly well (because of
the use of <span> rather than <div>) in situations with bad CSS support.
For some of the worst round corner schemes out there, try this
http://csszengarden.com/?cssfile=/157/157.css&page=0
Now that's an unfair criticism to some extent. The HTML page for the zen
garden is (by definition) unchangeable and it just doesn't have the
hooks to allow neat corner-rounding. However this is not a good page
(it's too rigid in sizing) and it's not an example that should ever be
copied.
For a really bad page, try some old HP (Hewlett Packard, who used to
make printers) pages from 2000-2002, where they had a particular
obsession for 3x3 tables and rounded cornering. Pure HTML and stinking
CSS.