CSS Corner Image/ Radius

Question

hi. i used this corner style:

.corners4{
    background:url(../img/panelHeaderColor.jpg) repeat-x;
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; 
}

but, this doesn't work in IE, is there any IE equivalent for this? thanks

Answer 1

The -moz- part stands for "Mozilla" - this property is not supported by IE.

There is no CSS only equivalent for this that works across all browsers. At least not yet.

Curved corners are a serious pain in the behind to implement with javascript, and most solutions aren't very robust. The absolute best way to achieve this in a way all your users will be able to enjoy is the old school way of using your own images as corners, unfortunately. This website makes the process easier, at least. If you want to venture into JS solutions, I've heard good things about curvyCorners.

Answer 2

IE seems to be tricky with rounded corners a lot of times. All in all, you will find it isn't supported very well, and there are still plenty of users going back to IE5.5 or so. I would recommend a different approach.

While I don't remember exactly where I learned it, I can give you the code I have on my website.

HTML Code that goes before your element:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

HTML Code that comes after your element

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

CSS Code:

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background: #000; margin:0 4px;}
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;}
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;}

The above CSS code, the #000 is going to be your border color. The #FFF is going to be the color of your content box.

You will want to have no top and no bottom border on your content block, but then set the left and right border to be 1px and then the color you want the border to be.

Depending on your current implementation this may seem somewhat not as nice looking, and feel free to add more b tags applying the same logic to get a bigger radius. If you would like a larger radius and can't figure it out, just let me know and I'll extend this to be larger.

One final note, depending on where you are placing these you may have to tweek the margin settings a bit.

Answer 3

If you remove the -moz- part of the property, you will have border-radius-topleft and so on. These are the border-radius properties. These are only in the CSS3 standard. With IE's current track record, CSS3 should be supported sometime around 2017. If you want it to work in Safari, you can use -webkit-border-radius. See this question for more information on rounded corners.

Answer 4

The corner radius issue of IE gonna solve.

http://kbala.com/ie-9-supports-corner-radius/