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     lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt title gt Untitled Page lt  title gt    lt style gt  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     lt  style gt     lt  head gt   lt body gt    lt div class  leftcolumn  gt     lt div class  lefttop  gt       lt H4 class  categoryheading3  gt Heading lt  H4 gt       lt p gt sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text  lt  p gt     lt  div gt   lt  div gt   lt  body gt   lt  html gt    Which produces this in Firefox     But this in IE8     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

User · Answer

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!

User · Answer

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

User · Answer

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

User · Answer

http   fetchak com ie-css3  works for IE 6   Use this if css3pie doesn t work for you

User · Answer

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

User · Answer

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

[css] CSS rounded corners in IE8

Rounded corners in IE8

Examples related to css

Examples related to internet-explorer

Examples related to internet-explorer-8

Examples related to rounded-corners