PM Photo & Computer Services
Web Site Design and Business Products

CSS-3 Round Corners (border-radius): Browser Dependent

Return to Problems & Solutions index page

sample of corner-radiusRounded corners on web elements are cool. You’ve been able to do it with images and JavaScript for a long time but now it’s really easy to do with CSS-3 … except it doesn’t work in all the browsers. Using the Moz and Webkit style or the plain css-3 style will result in different results depending on the browser.

Using the Moz & Webkit style works in FireFox 3.6, Chrome 7.0 and Safari 5.02 but doesn’t work in Opera 10.54. Using the CSS-3 style “border-radius” works in Chrome, Safari, and Opera, but not in FireFox. Nothing works in IE8 … sigh. Just for grins, I put both styles in my style sheet and that made the rounded corners work in FireFox, Safari, Chrome, and Opera. See the sample illustration (left):

A: No corner radius style

B: -moz-border-radius: 25px;
   -webkit-border-radius: 25px;

C: border-radius: 25px

D: border-radius: 25px;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;

For simplicity I used a radius of 25px for all the corners. I have created a page on my site if you would like to see which code or combination works in the browser you use.

I have created a page with all the code samples: http://www.pmphoto.us/test/border_radius_test_page.htm



Go to the link, copy the URL and try it in your browser to see if it supports any variation of the corner-radius property.