CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8rounded-corners
falter
falter

Reputation: 13644

CSS rounded corners in IE8

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;
}

Upvotes: 58

Views: 132261

Answers (6)

Lior Elrom
Lior Elrom

Reputation: 20862

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 suggest you review all other solutions and choose what works best for your needs.

I hope it was useful. Good Luck!

Upvotes: 33

Zhenya
Zhenya

Reputation: 6198

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.

Upvotes: 2

Gautham
Gautham

Reputation: 29

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

Upvotes: 2

Chud37
Chud37

Reputation: 5007

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.

Upvotes: 4

zixtor
zixtor

Reputation: 241

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/

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219938

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.

Upvotes: 69

Related Questions