Sue Feng Design

‹ Back to blog

Cross Browser Rounded Corners

Rounded corners that work across browsers have been a problem for me for quite a while. The problem wasn’t the rounded corners, but other features I wanted with the rounded corners. I still haven’t found a great solution to being able to have gradients and rounded corners together or shadows with rounded corners, but I learned a compromise technique. That is, have all the features for browsers such as Chrome Firefox and Safari, but only show rounded corners for Internet Explorer. Internet Explorer has been the problem child for as long as I can remember in the years I have been styling Web sites. Here’s my solution in terms of making buttons. Below is a red button with a gradient effect.

Where it says demo button, put what you want your button to say. Of course you can rename the class to whatever you want but you’ll have to stay consistent with the CSS and JavaScript callings of the class.

To learn more, you may visit Web Designer Wall for more colors on buttons and CurvyCorners.net for more options on curved corners in Internet Explorer.

Posted on: April 28, 2012Categories: TutorialsTags: coding, css
‹ Back to blog