Useful scripting techniques

Click here to go back

18/09/10 - Round Corners

As most browsers have adopted the border-radius property (bar Internet Explorer) AFX have started using the CSS set attribute.

Example:
.round { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.round-bottom { -moz-border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; -moz-border-top-right-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; }

Recent webkit browsers now support the official CSS3 border-radius property without the browser prefix. As this change was very recent AFX will continue to use the prefix.

What about IE?
IE9 is reported to include rounded borders but as it has only just been released in beta and will not run on XP I would not rely on the border-radius CSS attribute. Sometimes I wish we could allow IE users to view the sites with all the quirks intact so that they begin to understand what a bane of our existence IE really is. But whilst IE is still the worlds most popular browser and corporations take decades to provide the important updates it is important to ensure websites look correct in IE.

Most solutions we have come across use images and tons of nested divs. The purest approach to the issue is:

DD Roundies

There are off course still issue with this solution. Firstly background images are removed from the roundified object. Secondly trying to keep a rounded object intact when implementing a hover is a headache.