On Friday, David Hyatt posted on Surfin' Safari that support for several CSS3 properties had been added, including border-radius. Many of you will have seen my site, and, it must be pointed out, for each block, 4 divs and 4 images are needed, one for each corner. The border-radius property eliminates the need for all but one of those divs, and no images are required.
I went ahead and ported my site to CSS3, and here are some screenshots for those of you without the WebKit CVS running ;) The current XHTML1.1/CSS2 version and the experimental XHTML1.1/CSS3 version. To keep them equal, they are both taken from Safari running the WebKit CVS.
I challenge anybody who looks at either of those to find a single difference, apart from the corners being smoother.
Some other info: By not having to download an images for each corner, a total of 12 images, as well as being able to cut out 3 divs on each block, I have saved the browser downloading 17,476 bytes, by getting the total size down to 51,057 bytes from 68,533 bytes.
But -moz-border-radius? Why aren't I going mad about that? The CSS3 property is border-radius, not -moz-border-radius.
