Most browsers still do not display CSS3 rounded corners (border-radius), although Mozilla Firefox has implemented its own version of corners, -moz-border-radius.

This is an attempt to recreate rounded corners, which work on most browsers without resorting to images.

The theory is that if you nest a few div’s each with differing borders, then you can create a rounded effect. The upside it that most browsers respect border widths, but the downside is that you end up with more div’s in your html than you really need. So much for separating content and style.

Individually:

A 75×75px div with a 15px left and top border, and a 60px bottom and right border

A 30×30px div with a 15px left and top border, and a 30px bottom and right border

A 0×0px div with a 15px left and top border, and a 15px bottom and right border

When Nested:

Make the colours the same:

A more useable size

Whilst the large one is nice, and we can even make circles by putting 4 of them together, the application in my mind needs to make them somewhat smaller

It is important that the ratio between the div widths/heights and border widths stays the same. Here each value is 2/5 of the one above. (i.e. 30px square)

Or even smaller…(although smaller ones may as well be made with only 1 nested div, this one has 3)

Or even smaller…

One for each corner

Now, all that is needed is to make 4 of these things, and put them in each corner of a page.

This entry was posted on Sunday, March 25th, 2007 at 2:04 am and is filed under Computer, General. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.