Border Radius for IE8

Question

I have a problem with border radius on IE8, till now I used pie.js but I don't recommend this js library because is buggy. If you have a small site with not many html pages, it is more than ok to use that library, but if you have a heavy application in which many different frameworks are used, then is impossible to use that. Same behavior for CurvyCorners or other mega libraries.

So if anyone can help me with a small jQuery or javascript plugin to do just border-radius on IE 8 I'll be grateful for life.

Solution 1

Try this:

requires:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>

Javascript:

$('.box').corner();

HTML:

<div class="box">Hello</div>

CSS:

box{
  width:150px;
  height:28px;
  padding:10px;
}

more examples: http://jquery.malsup.com/corner/

Solution 2

Short of using the libraries that you described in your question, I don't think you can do curved corners in IE8.

If you really wanted them, you could probably use an image to give the curved corner effect, at the cost of increased bandwidth and messy code.

Solution 3

According to Microsoft:

Other Rounded Corners Solutions

We would like to point out the abundance of alternate solutions available on the Web. In addition to individual rounded corners solutions, there are also sites with frequently updated lists of rounded corners solutions that are compatible with multiple versions of Internet Explorer and other browsers.

Listed here are a few of our favorite sites for aggregated rounded corners solutions. They are presented in no particular order, and the inclusion of any link does not imply endorsement by Microsoft of the site.

• CSS-Discuss Wiki, RoundedCorners: http://css-discuss.incutio.com/?page=RoundedCorners

• SmileyCat, CSS Rounded Corners "Roundup": http://www.smileycat.com/miaow/archives/000044.php

• CSS Juice, 25 Rounded Corners Techniques with CSS: http://www.cssjuice.com/25-rounded-corners- techniques-with-css/

Solution 4

Check out this post: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

It covers specifically rounded corners and box shadow in IE7/8.

and also below with so many examples

http://blue-anvil.com/jquerycurvycorners/test.html

Solution 5

I have used the border-radius.htc in the past.

The only pain is that the CSS Urls are relative to the CSS file. HTC are relative to the page.

you can download the demo here.

View more solutions

Comments

[BurebistaRuler]

try to do that on a form in which you have more that 150 inputs, selects, textaarea and other borders for which you want to add border radius. The result is: the page will open in few minutes. Because of that I need something easy like a jQuery,js function.

[Tom Will]

That's true. From my experience, you're going to be stuck either having angular corners, or using a library which you already said was impossible.

[BurebistaRuler]

Yes, sow how we fix that on wonderful IE8? I like to think in this world is someone that resolved this.

[Litek]

You don't fix it - every mentioned solution would be painfully slow when multiplied by 150 elements. So it's either images or nothing.

[ShadowScripter]

@burebistaruler JQuery doesn't do good with lots of elements either, you know. JQuery is limited to the browser and its capabilities, while the pageload is done by the server, and the render by the browser. Consider having one image file with all the curved corners and do background-positioning. The client will only need to download the image once, and then it's cached in memory. It won't take a few minutes because you have one file.

[BurebistaRuler]

I cannot use .htc files on my project.

[BurebistaRuler]

Already tried this plugin ... it force you to have a background color.

[BurebistaRuler]

Hmmm I tried once with modernizr but know that something did not work. Do you have a small example with modernizr border-radius to test on IE8 to see how it works.

[Ryan]

After looking at the Modernizr fall-back I use and researching a little as a result of your comment, it will require images to be used on the corners - no longer cool, so this lead me to do a bit of research where I found this link that on my testing in IE8 as well as tested IE6, IE7 and IE8 browser modes in IE9 where it worked well. I hope this helps you a little more.

[Tracker1]

Either you need to use something that does .htc for the vector rendering, which is slow, as you mention for a lot of elements (like PIE), or you need to add additional elements for styling, this will require a background color, of some kind... it isn't magic and there is no quick fix, as you seem to be looking for.

[yunzen]

@burebistaruler I think you cannot expect him to do some graphics for rounded corners and then host them somewhere, just to help you with this

[Niklas]

Side note. Who'd want to fill out a form with more than 150 inputs?

[BurebistaRuler]

:))))) An intelligent client who wants a matrix page. I'm just the developer I cannot take decisions...

[Houdmont]

That's not true, I believe you can use .corner(cc:xxx) to define the colour of the corner elements? (Where xxx is the colour you have chosen).

[onof]

This library works great. Thanks for solving my round corners nightmare

[Rocco]

This particular lib however adds tons of div containers around each form input in IE8 (I just counted 22 per input...wtf?). This must have a negative performance impact on big pages with a lot of inputs as described in the question.

[Si8]

It adds colors for the borders which I don't want as it conflicts with the background image. Great idea though!