CSS Circles Test - 10-7-09

 
 
 
 
 
 
 

About this Design:
This is an experiment on whether I can create circles on a page using only CSS. In this I test two new CSS properties: border-radius and rgba values.

The image below shows how this experiment renders in several different browsers. As expected, the latest versions of Firefox and Safari both work perfectly. Opera renders the RGBA background color but not the border-radius. This is understandable, as Safari and Firefox only render border-radius due to the inclusion of browser-specfic properties (-webkit-border-radius and -moz-border-radius) If these were not present, they too would be showing square. Internet Explorer does not render either property.

CSS circle comparison