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.

In 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners. — Simon Smith, Feb 24 '12 at 14:00
You could try this: http://jquery.malsup.com/corner/. But I agree that you should just leave IE8 out, if possible. — bfavaretto, Feb 28 '12 at 15:44
unfortunatley I must have same interface on ie8,chrome and ff — mcmwhfy, Feb 28 '12 at 15:47
I have had great luck with pie.js for even heavy applications. What error are you having? — Fresheyeball, Mar 05 '12 at 18:54
wow , really? almost all problems with pie.js are encountered inside modal window. For example I have a modal window with many elements inside and an overflow-y scroll. Now if I apply pie.js on some buttons from that modal page when I do scroll on modal the background of buttons is scrolling up and down, and most encountered error is this: "null" is null or not an object. — BurebistaRuler, Mar 06 '12 at 09:04

score 40 · Answer 1 · answered Mar 05 '12 at 06:33

40

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/

answered Mar 05 '12 at 06:33

Abudayah

3,816
7
40
60

1

This library works great. Thanks for solving my round corners nightmare – onof Oct 10 '12 at 10:54
10

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. – Rocco Nov 06 '12 at 10:43

score 17 · Answer 2 · answered Feb 24 '12 at 07:35

17

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.

answered Feb 24 '12 at 07:35

Tom Will

361
2
12

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. – BurebistaRuler Feb 24 '12 at 07:43
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. – Tom Will Feb 24 '12 at 07:52
Yes, sow how we fix that on wonderful IE8? I like to think in this world is someone that resolved this. – BurebistaRuler Feb 24 '12 at 07:59
2

You don't fix it - every mentioned solution would be painfully slow when multiplied by 150 elements. So it's either images or nothing. – Litek Feb 28 '12 at 15:47
3

@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-position`ing. 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. – ShadowScripter Feb 28 '12 at 15:50
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. – Tracker1 Feb 28 '12 at 20:21
Side note. Who'd want to fill out a form with more than 150 inputs? – Niklas Mar 06 '12 at 08:42
:))))) An intelligent client who wants a matrix page. I'm just the developer I cannot take decisions... – BurebistaRuler Mar 06 '12 at 09:18

score 6 · Answer 3 · answered Feb 28 '12 at 15:48

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/

samirprogrammer · Answer 4 · 2012-03-06T13:29:48.630

5

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

edited Mar 06 '12 at 13:29

answered Mar 06 '12 at 12:14

samirprogrammer

438
5
18

score 4 · Answer 5 · answered Feb 28 '12 at 15:47

4

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.

answered Feb 28 '12 at 15:47

Etch

3,044
25
31

I cannot use .htc files on my project. – BurebistaRuler Feb 28 '12 at 15:55

score 3 · Answer 6 · answered Feb 28 '12 at 15:49

Why don't you use css' :before and :after pseudo classes to add curved corners.

Your comment on Tom Will's answer suggested that you have a lot of form inputs right?

Well I assume that they will be mostly uniform in width.

Just create some classes like curved-std-width, curved-lge-width, curved-sml-width and then you can do this in your CSS:

.curved-std-width:before {
  height: 5px;
  background: url('curved-top-5px.png');
}

.curved-std-width:after {
  height: 5px;
  background: url('curved-bottom-5px.png');
}

Something like that should work pretty well without you having to go and add endless html before and after form inputs.

Otherwise you can probably do it using jQuery as well:

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');

And then style appropriately.

@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 — yunzen, Mar 02 '12 at 08:32

score 3 · Answer 7 · answered Feb 28 '12 at 15:50

3

Why don't you use jQuery's corner plugin?

You can easily apply corners to any element with a specific classname or ID; for example:

$("#box1").corner();

It also allows you to decorate or modify the type of corner effect you want adorning your elements.

You can also use other JavaScript solutions like CurvyCorners or even some CSS solutions. Another option is to use JavaScript to wrap <div> elements your form inputs and use CSS's background-image to emulate the look of rounded corners. For instructions on this last solution, see this tutorial.

answered Feb 28 '12 at 15:50

hohner

11,498
8
49
84

Already tried this plugin ... it force you to have a background color. – BurebistaRuler Feb 28 '12 at 15:56
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). – Houdmont Mar 06 '12 at 12:53

score 2 · Answer 8 · answered Feb 29 '12 at 10:49

This is ugly but might work if you know beforehand the background color of the input fields (which can be a problem with submit buttons): http://jsfiddle.net/563c5/1/

I have no idea how it will behave when rendering lots of input fields in an average computer.

IE8 supports inline CSS images, and you need only 1 small image for all four rounded corners. Any solution relying on corner images may actually require just a few extra bytes of bandwidth.

score 1 · Answer 9 · answered Feb 28 '12 at 15:52

1

I would recommend giving Modernizr a go, the great thing about it is you can use it to substitute most (if not all) unsupported CSS3 in older browsers. I have used it on a number of large web apps without any dramas.

You can also look at the jQuery UI library that I believe has some rounded corners scripts.

I hope this helps... good luck!

answered Feb 28 '12 at 15:52

Ryan

1,878
1
14
17

1

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. – BurebistaRuler Feb 28 '12 at 16:10
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](http://blue-anvil.com/jquerycurvycorners/test.html) 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. – Ryan Feb 28 '12 at 16:59

score 1 · Answer 10 · answered Mar 01 '12 at 00:15

you should use the alternate pie.htc, its similar thing but less buggy, and either way i don't recommend it.

Heavy use of css3 elements on these non css3 comply browsers, don't perform good, chances is that their system are not up to date too causing them extremely laggy. So it is good for them to degradation to a normal corner.

If you really want it to look good on ie, you best of using image sprite backgrounds, or you going to change to drive away a number of your visitors for lagging issues.

score 1 · Answer 11 · answered Mar 01 '12 at 22:31

1

Not sure if it was covered by previous contributors, but I used mainly dd_roundies library, and for rounded corners alone it worked ok. Mixing corners with IE filters usually was too much to ask though.

answered Mar 01 '12 at 22:31

heliogabal

613
2
7
16

score 1 · Answer 12 · answered Mar 04 '12 at 15:21

1

Have you tried this: http://jquery.malsup.com/corner/

answered Mar 04 '12 at 15:21

MatthewK

466
4
9
19

score 1 · Answer 13 · answered Mar 05 '12 at 16:23

Use this : http://css3pie.com/

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Supported CSS3 Features

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

score 1 · Answer 14 · answered Mar 06 '12 at 01:58

1

You can use image with round corner to border a div. Example:

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

Or you make some magic like:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

answered Mar 06 '12 at 01:58

cowboybkit

1,013
7
4

score 0 · Answer 15 · answered Apr 11 '13 at 14:27

0

Just another JavaScript-based solution: Nifty Corners Cube. It is released as GNU GPL and doesn't need jQuery.

answered Apr 11 '13 at 14:27

Pino

7,468
6
50
69

score 0 · Answer 16 · edited May 31 '13 at 20:41

0

Use this code to get rounded corner in IE 6+

<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>
<script>
    $('#logo-navsection').corner( function() {
        $("this").css("border-top", "0px 0px opx 10px")                
    });
</script>

edited May 31 '13 at 20:41

skuntsel

11,624
11
44
67

answered May 31 '13 at 20:19

Manikanta

1

It adds colors for the borders which I don't want as it conflicts with the background image. Great idea though! – Si8 Feb 24 '14 at 16:43

Border Radius for IE8

16 Answers16

Linked

Related