Cross-browser rounded corners! Works on IE but, but not on Opera!

What’s this that works on IE and any other browser, except on Opera?!

Rounded Corners

That was a strange answer. Who’s making rounded corners with CSS?! on IE and more important how? There is a way to make it, but not entirely with CSS and HTML. The solution is with VML a subset of XML to deal with vectors, and CSS of course.

The original solution I found on snook.ca.

It is really working fine as described and shown in the example, but there are some issues as well. There is no way to setup background image on the container, and the width and height are behaving strange.

However this gives you an opportunity to make cross browser rounded corners with no scripting that slows down the page and except Opera it’s quite working!

6 thoughts on “Cross-browser rounded corners! Works on IE but, but not on Opera!

  1. I did some research for a new web site I’m building and found that the latest versions of Opera supported rounded corners; here’s code I used that supports just about all the browsers that have CSS3 capability (minus IE):

        -moz-border-radius:0px 7px 7px 0px;
        -webkit-border-bottom-right-radius: 7px;
        -webkit-border-top-right-radius: 7px;
        -khtml-border-bottom-right-radius: 7px;
        -khtml-border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        border-top-right-radius: 7px;

    Note the last two lines — those are the ones for Opera. If you’re going to do uniform corners all around, then the syntax is border-radius for Opera.

  2. Wouldn’t it be wonderful if the other browsers adopted the same CSS3 syntax? Then those two lines would suffice.

  3. Some of the new browser versions support that syntax, however most of the users worldwide still use older version browsers. We’ll see it someday in practice.

Leave a Reply

Your email address will not be published. Required fields are marked *