Aligning your CSS properties .... and using a few different ones

Posted in CSS CSS3 on 24 June 2009

Well, that was a slight surprise. I looked at the visitors statistics for this blog yesterday and discovered that more than 70% of you are not using Internet Explorer. As a result, I have decided to ‘align’ the CSS properties that I use with the browser stats on this blog – and start using some CSS properties that I would not normally use. By this, I mean properties that are supported by Firefox and Safari, for example, but perhaps not by IE. Users with browsers that do not support these properties will still see the website perfectly fine but will not see some of the styles that are produced by these ‘more advanced’ properties. After all, websites should not look exactly the same in all browsers.

I have started the process by sprinkling in some border-radius loveliness around the site. The border-radius CSS3 property allows you to add borders with rounded corners to elements by specifying a few simple rules in your style sheet. If you have a background colour on the element but no border you will get a rounded corner box. I will describe this in more detail in a later post but here’s a nice article that explains border-radius.

This is an example paragraph with the border radius property applied. If you are viewing this with Firefox and Safari, you will see that it has a pale green background with rounded corners. If using Internet Explorer, you will see straight edges.

Using these properties gives me a chance to experiment a bit with some newer CSS features that I’m sure will become mainstream. In this case, it also means that I can implement rounded corners in a few lines with minimal effort. Result!

Technorati : css