On the Opera forums AyushJ linked me to a site by an Italian gentleman named Alessandro Fulciniti that is a contemporary of my original page, but uses bold tags instead of DIV's to accomplish the same effect - The difference is he was using them as siblings with a bunch of classes instead of nested, much akin to my orignal method of doing this...
Then on Digital Point "Digital Artist" took the sibling <B> tag method, my original example with the four 'odd' corners, and ran with it.
So after some review I'm switching this page from DIV's to B's... I have some reservations about using a tag with meaning like B as a 'sandbag', but being there's no content and it let's us use a inline level element allowing this effect to be put inside things like anchors... What's the difference? If it saves a few bytes and makes it 'clearer' - I'm all for it.
What makes my version so different from the others is the use of nesting the tags instead of making them siblings - meaning we need one heck of a lot less classes to implement them, and a lot of our values can be inherited instead of having to be set manually for each class.
About a year or two ago I wrote a quick demo on doing rounded corners in just CSS without using images, mostly as an exercise to see what's involved. Since then my knowledge of CSS has doubled, maybe even tripled - so here I'm going to present 'cleaner' versions of those methods. I did a second example just a month back, and after presenting it on several forums I was linked to other methods of doing this, and decided to condense the best of all techniques down to a single easy to deploy version.
You see it asked repeatedly on several forums what exactly is involved in doing rounded corners - the traditional solution is to use images, either in a split table or using floats - but there's another way of doing it I've grown kind of partial to, positioning DIV tags and using their background and border colours. A lot of people are asking why you'd do this instead of using images since as a rule, this tends to result in making the HTML as big as the four images (one for each corner) you'd load... It does end up about 1-3k per 'style' you apply, BUT:
First, it means that if you don't have the time to play with images in a paint program (or haven't mastered transparancy) you have a way out... For those of us who are not computer graphics wizards the ability to create what we want using raw math and code has it's own appeal.
Second, this can actually download quicker and cause less load on your server by being contained in only one or two files, (the html and css) instead of five or six... Downloading multiple files can take longer due to things like ping time, handshaking, server load, etc. It quite often consumes more server load to send six small files than it does one larger one.
Finally, it's a pure CSS solution, some people just like that better.
For our examples we will make a 3 pixel indent on the first line of pixels, a 3 pixel indent on the next line, a 2 pixel single line indent, and then a 1 pixel indent 2 pixels high resulting in the closest thing to a round corner you can achieve on a grid. This is the equivalent of using 5px wide/tall images. These techniques can be expanded to be larger by just adding more 'sandbag' DIV's, or shrunk using less.
Enough prattling, let's see some code:
Which renders a little something like this:
A good number of your image based implementations often fail when you try to float them or align text inside them, so let's run a quick test to show that float:right works..
Now a lot of you are going to say that's a few more DIV's than needed - It's usually my most common complaint on other people's code, but stick with me here. By using an outer wrapper we can combine styling both the top and bottom elements into once set of css rules - both in terms of colors and actual shape. Why apply the colors as a separate rule? So we can reuse the shape rule of other elements in other colors - something that is done at the top of this very page to create the 'inverse' corners on the main title. It's called 'modular design' and means when it comes time to try more complex corners, we have the means to do that quite easily. The inner 'content' DIV lets us apply the content area color separately - meaning we can make the rounded corners show through to the content area underneath unlike the versions of this which use borders to create the rounded edges, and it allows us to wrap any number of tags from headers to paragraphs to other DIV's without having to style each and every one of them.
On the HTML side, the core of our top/bottom rounded corners is a nested set of bold tags. By nesting them like this we do not have to apply a class to each, just the outermost one. The outermost one we give 5px padding left and right and the full height - then we apply 1px top padding to all the 'top' bold tags, and 1px bottom padding to all the bottom ones making them 'stack'. By decreasing the height of each we get a row of stripes we can then widen by applying a negative left and right margin, slowly building up our 'corner'. The first one gets pulled out 2px, the next 1px, the next 1px but ends up 2px tall (1px height + 1px padding) giving us our rounded edge. We don't have to explicitly declare the margin:0 -1px; on the last one because it inherits that from the parent wrapping tag.
Because we do it all with margins our rounded corners are transparent - so unlike the more common 'left/right border' method, this one can be used over a textured image background with little or no hassle - likewise if you take some care you can apply a background image to this, compositing your rounded corners on page meaning you could use one image instead of six or even nine!
But what about borders? Since we didn't use the border tag above, could we actually apply a border to this? You betcha:
Which looks a little something like this:
On this one you'll notice we really didn't have to change much - our first few lines are basically the same except for setting the border style to solid on both the bold tags and our content, and set left/right border for .content as well. The only major changes is the use of border-top on .top instead of padding, (and border-bottom on .bottom), then the addition of borders left and right to each internal bold tag for which we compensate on the positioning by increasing our negative margins.
The HTML side of things is where the method starts to shine as we have done nothing but change the classes of the outermost container - which is exactly what one should be aiming for with this type of code... You always want to minimize the amount of HTML you have to change. The true ideal is to do it with no changes to the HTML - but for a quick easy library that's not always possible.
So what else can we do with this? Since we now have the ability to draw extra pixels around it how about instead of a border we use those corner pixels to anti-alias the corners? That particular trick is exactly how the layout of this page is put together. Since we could theoretically control the colors of those border pixels how about a drop shadow? Inset/outset buttons? How about different shapes? By changing the margins and heights we can actually do a whole slew of different shapes both convex and concave. You could even nest a few more bold tags deeper to make even larger corners.
Examples of a number of these techniques can be found on the CSS Border Example Page - both this page and the example page make use of the same Common CSS Border Library of corner styles which you are free to download and use. The library does NOT declare any default colors so you are on your own to declare the color, background and border-color as shown in the above code samples.