CSS rounded corners in IE8

Question

I'm having issues with rounded corners in IE8. I've tried a few methods without success.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  padding: 2px;
  margin: 2px;
  color: #505050;
  line-height: normal;
}
p {
  margin: 4px;
}
.categoryheading3 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
.leftcolumn {
  width: 174px;
  padding: 8px;
  float: left;
  display: inline-block;
  background-color: transparent;
  /*--min-height: 500px*/
  overflow: hidden;
}
.lefttop {
  display: inline-block;
  width: inherit;
  margin: 0 5px 2em 0;
  float: left;
  width: 160px;
  background-color: #FFFFFF;
  border: 2px solid #297BB6;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
</style>


</head>
<body>

<div class="leftcolumn">
  <div class="lefttop">
    <H4 class="categoryheading3">Heading</H4>
    <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
  </div>
</div>
</body>
</html>

Which produces this in Firefox:

firefox example

But this in IE8:

IE8 makes me sad

If anyone has any tips I'd be very grateful!

edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:

.categoryheading3 {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  behavior: url(PIE.htc);
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}

it looks to me like your css is missing the standard border-radius property — ph33nyx, Mar 06 '13 at 21:07

score 69 · Accepted Answer · answered Aug 16 '11 at 11:21

69

Internet Explorer (under version 9) does not natively support rounded corners.

There's an amazing script that will magically add it for you: CSS3 PIE.

I've used it a lot of times, with amazing results.

answered Aug 16 '11 at 11:21

Joseph Silber

214,931
59
362
292

This works well for the element which is round on all corners, however I can't seem to get it to work on the one which only has rounded top left+right - any suggestions? – falter Aug 16 '11 at 11:31
4

@kevyn: Can you show me the CSS you're using? CSS3 PIE supports only shorthand properties (`border-radius: 5px 5px 0 0;`), not the longhand ones (`border-radius-topleft: 5px; etc.`). – Joseph Silber Aug 16 '11 at 11:35
I edited my CSS which is in the OP, and I added behavior: url(PIE.htc); into both elements. The element with 4 rounded corners works well, but the one with only the top 2 corners doesn't make any difference – falter Aug 16 '11 at 11:40
I've updated my post to include the CSS which I can't get to work (I tried your suggestion of using shorthand format) – falter Aug 16 '11 at 11:44
3

You're only using the vendor-prefixed versions. CSS3 PIE works with the standard one: `border-radius`. – Joseph Silber Aug 16 '11 at 11:51
Great concept, pathetic execution. It fixes 3 parts of your CSS and messes up all the rest. – RobinJ Feb 22 '13 at 23:30
1

PIE renders properly the corners, for example border-radius: 30px 0 0 30px;, but it makes my div opaque. I am using opacity: .6; and filter: alpha(opacity=60); – tmorell May 25 '13 at 23:42
1

PIE fixed the rounded corners for me but somehow stopped a background colors working, so it seems to be hit and miss – Pete Jul 22 '13 at 13:43

score 33 · Answer 2 · edited Jun 20 '20 at 09:12

Rounded corners in IE8

Internet Explorer 8 (and earlier versions) doesn't support rounded corners, however there are few other solutions you may consider:

Use Rounded Corners Images instead (this generator is a good resource)
Use a jQuery Corner plugin from here
Use a very good script called CSS3 PIE from here (Pro's & Con's here)
Checkout CSS Juice from here
Another good script is IE-CSS3 from here

Even though CSS PIE is the most popular solution, I'm suggesting you to review all other solutions and choose what works best for your needs.

Hope it was useful. Good Luck!

score 4 · Answer 3 · answered Jun 27 '12 at 18:23

I didnt know about css3pie.com, a very useful site after seeing this post:

But what after testing it out it didnt work for me either. However I found that wrapping it in the .PHP file worked fine. So instead of:

behavior: url(PIE.htc);

use this:

behavior: url(PIE.php);

I put mine in a folder called jquery, so mine was:

 behavior: url(jquery/PIE.php);

So goto their downloads or get it here:

http://css3pie.com/download-latest

And use their PHP file. Inside the PHP file it explains that some servers are not configured for proper .HTC usage. And that was the problem I had.

Try it! I did, it works. Hope this helps others out too.

unfortunately this still didn't do anything for me on IE8 :( — Vicer, Jul 30 '12 at 02:38
This is because you haven't configured the correct MIME type on the webserver for .htc files. See: http://stackoverflow.com/a/4672959/229587 — NickG, Apr 24 '14 at 15:59

score 2 · Answer 4 · edited Oct 05 '12 at 13:10

2

http://fetchak.com/ie-css3/ works for IE 6+. Use this if css3pie doesn't work for you.

edited Oct 05 '12 at 13:10

ЯegDwight

24,821
10
45
52

answered Oct 05 '12 at 10:44

Gautham

29
4

score 2 · Answer 5 · answered Feb 15 '13 at 09:07

2

PIE.htc worked for me great (http://css3pie.com/), but with one issue:

You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.

answered Feb 15 '13 at 09:07

Zhenya

6,020
6
34
42

it looks like relative pathing is not relative to the css file on this, but relative to the docroot instead – ph33nyx Mar 06 '13 at 21:05
ph33nyx is almost correct. When using Internet Explorer behaviors, the document being referenced is relative to the calling HTML file, not the CSS file. Just be aware of this when you use it so you don't go crazy trying to find out why it isn't working. – Neil Monroe Mar 21 '13 at 22:32
I am using it with relative path as `behavior: url(../PIE/PIE.htc);` and it's working fine. – erdomester Feb 19 '14 at 09:36
levgen you don't know how much I am thankful thank you!!! you were right relative path didn't worked and I studied whole the pie forums and I was just hopeless but I used the complete path and then it worked – Nickool Aug 25 '14 at 17:33

zixtor · Answer 6 · 2011-08-18T10:27:05.857

0

As Internet Explorer doesn't natively support rounded corners. So a better cross-browser way to handle it would be to use rounded-corner images at the corners. Many famous websites use this approach.

You can also find rounded image generators around the web. One such link is http://www.generateit.net/rounded-corner/

edited Aug 18 '11 at 10:27

answered Aug 16 '11 at 13:17

zixtor

241
1
8

2

thats a very old approach, I wouldnt reccommend this. Libs like PIE made css3 possible in ie8 and is all we need. – chesscov77 Jan 05 '13 at 16:06

CSS rounded corners in IE8

6 Answers6

Rounded corners in IE8

Linked

Related