Does not work border-radius IE8

Question

To implement the border-radius in IE8 I use border-radius.htc

The block in which to work correctly realzovat border-radius:

.mc-button
{
    -moz-transition: all 0.218s ease 0s;
    -moz-user-select: none;
    background-color: #CBCBCB;
    background-image: -moz-linear-gradient(center top , #CBCBCB, #DCDCDC);
    border: 1px solid #DCDCDC;
    color: #FFFFFF;
    cursor: default;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 70px;
    padding: 0 8px !important;
    text-align: center;
    overflow: visible;
    font-family: inherit;
    font-size: inherit;
    float: left;
    text-decoration: none;
    display: block;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-outline-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: Arial, Sans-Serif !important;
    behavior:url(Content/border-radius.htc);
}

According to the list of attached files - border-radius.htc connects to the page

Can you please tell how to solve the problem?

UPDATE (06/13/2012)

If the code is replaced by a button:

.mc-button
{
    border: 1px solid #696;
    height: 29px;
    line-height: 29px;
    min-width: 70px;
    text-align: center;
    padding: 0 8px !important;
    overflow: visible;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    display: block;
    background: #00ADEE;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
    background: -webkit-linear-gradient(#00ADEE, #0078A5);
    background: -moz-linear-gradient(#00ADEE, #0078A5);
    background: -ms-linear-gradient(#00ADEE, #0078A5);
    background: -o-linear-gradient(#00ADEE, #0078A5);
    background: linear-gradient(#00ADEE, #0078A5);
    -pie-background: linear-gradient(#00ADEE, #0078A5);
    behavior: url("Content/PIE.htc");
}

and to declare as:

<a id="login_button" class="mc-button mc-button-submit ">SomeText</a>

.mc-button-submit
{
    border: 0px solid #0076A3;
    background: #00ADEE;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
    background: -webkit-linear-gradient(#00ADEE, #0078A5);
    background: -moz-linear-gradient(#00ADEE, #0078A5);
    background: -ms-linear-gradient(#00ADEE, #0078A5);
    background: -o-linear-gradient(#00ADEE, #0078A5);
    background: linear-gradient(#00ADEE, #0078A5);
    -pie-background: linear-gradient(#00ADEE, #0078A5);
    color: #FFFFFF;
    text-align: center;
}

Rounding it disappears. Adding to the .mc-button-submit line behavior: url ("Content / PIE.htc"); does not help.

Can you please tell how to connect a second class with the parameters of the background?

If I understood correctly, it is not installed, just connect using: behavior:url(border-radius.htc); — SomeName, Jun 09 '12 at 13:46
Use [css3please.com](http://css3please.com/) for right and crossbrowser syntax of css3 features and [gradient generator](http://www.colorzilla.com/gradient-editor/) for making crossbrowser gradients — Vladimir Starkov, Jun 09 '12 at 14:20
I improved your styles and provide example which should work — Vladimir Starkov, Jun 09 '12 at 15:32

score 3 · Accepted Answer · edited May 23 '17 at 12:12

Standalone .htc hack is not working for background gradient and border-radius both at the same time.

Try to replace css gradient with simple image. This trick will work.

Also you can use css3pie (thanks to @dop-trois) — this pure Javascript tool is more perfect than standalone .htc file.

PS. Inset box-shadows cannot be implemented in both solutions.

PPS: the code you need is here: (i changed it a bit to make it more valid and correct):

.mc-button {
    font: bold 11px/29px Arial, Helvetica, sans-serif !important;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;

    border: 1px solid #DCDCDC;
    height: 29px;
    min-width: 70px;
    padding: 0 8px !important;
    overflow: visible;
    display: block;

    float: left;

    /* Unique link for this gradient — http://www.colorzilla.com/gradient-editor/#cbcbcb+0,dcdcdc+100;Custom */
    background-color: #CBCBCB;
    background: -moz-linear-gradient(top,  rgba(203,203,203,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,203,203,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* W3C */

    /* css3 stuff below: (via css3please.com) */
    /* no one prefix except `-webkit` is needed nowadays for `border-radius` */
    -webkit-border-radius: 5px;
            border-radius: 5px;
    -webkit-transition: all 0.218s ease-out;
       -moz-transition: all 0.218s ease-out;
        -ms-transition: all 0.218s ease-out;
         -o-transition: all 0.218s ease-out;
            transition: all 0.218s ease-out;

    /* PIE specific accordingly http://css3pie.com/documentation/q-and-a/ */
    behavior: url(PIE.htc);
}

You should be sure that you have included `PIE.htc` correctly (important!)

Relative questions

Accordingly to answers possible problems may be in mime type ("text/x-component").

Also possible solution may be:

position: relative;
z-index: 0;

In IE9 after removing and adding a gradient black background - there is a second block with rounded corners and then the background propaadet. In IE8 - a block once the background is not visible — SomeName, Jun 09 '12 at 14:03
Previously, I could not answer. Thank you for the example. I hooked PIE.htc file to the project. With F12 -> Network has verified that the file is connected correctly. Replaced by your own code - the corners are not rounded. — SomeName, Jun 13 '12 at 06:56
Deleted the additional classes, which was a gradient of a button - it worked, thank you) — SomeName, Jun 13 '12 at 07:42
@Vladimir Starkov The only, look, please, the update in first post) — SomeName, Jun 13 '12 at 08:14
I made haste, did not notice that browsing mode IE9. The above code in the first post in the Update does not work for .mc-button for IE8. — SomeName, Jun 13 '12 at 08:44
I found some another solutions and answered questions for you, try it. — Vladimir Starkov, Jun 13 '12 at 09:14
Excellent. Works) Thank you) The only. On the main page - all the buttons are displayed correctly rounded and gradient. When you go to other pages that use a similar button in IE8 - styles disappear and buttons are square and without a gradient. in IE9 - styles disappear and buttons are rounded, but without a gradient. When checking F12 -> Network File not in the list attached files — SomeName, Jun 13 '12 at 10:07
Still, I connect with PIE.htc behavior: url ("Content / PIE.htc"); within the class definition. Maybe I need to connect something else because I connect this file in several classes? — SomeName, Jun 13 '12 at 12:18
Thanks dear you gave me exact solution. I was troubling from 2 days. +1 from my side. — w3uiguru, Jan 09 '13 at 05:43

score 2 · Answer 2 · answered Jun 09 '12 at 14:00

2

To apply gradients and border-radius, I recommend CSS3 Pie. It's the most powerful tool i know, to apply CSS3 properties in IEs.

Apply gradients in IEs):

#myElement {
    background: #CCC; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
    background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

Apply border-radius in IEs):

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

You'll need PHP to get it work.

Live demo on CSS3 Pie's website.

Btw.: Applying border-radius & gradients the same time is possible with this tool ;)

Hope this helps :)

answered Jun 09 '12 at 14:00

doptrois

1,560
11
10

it is possible only for PIE and not standalone `.htc` – Vladimir Starkov Jun 09 '12 at 14:05
Correct, like i pointed in my answer "You'll need PHP to get it work." – doptrois Jun 09 '12 at 14:12
Thanks, but PHP is not used on the project. – SomeName Jun 09 '12 at 14:13
1

.HTC files is pure javascript files, and not require PHP support – Vladimir Starkov Jun 09 '12 at 14:14
Sorry for that, I just realized that no php tags set in this question. @Vladimir Starkov: I know,- strange, CSS3 Pie has PHP-Files inside, and I remember, I had to put these on server to get it work.. – doptrois Jun 09 '12 at 14:19
1

@dop-trois php files included in PIE only if you'd like prefer preprocess your `css` on the server – Vladimir Starkov Jun 09 '12 at 14:21
@VladimirStarkov: Thanks for that information :), so your answer seems the best workaround. – doptrois Jun 09 '12 at 14:25
@dop-trois i updated my answer with actual information and mentioned your investigations of problem – Vladimir Starkov Jun 09 '12 at 14:54

score 0 · Answer 3 · edited Jan 13 '13 at 12:16

To apply Gradients, Box shadows and Border-radius, I recommend CSS3 Pie. I used it in cook&smile project and it fully works in IE.

*{ behavior:url(path/PIE.htc);}

.border_radius_div{ position:relative; -webkit-border-radius: 10px; -moz-border-radius: 10px;  border-radius: 10px;}

.gradient_div{ position:relative; 
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); }

Visit this website to explore yourself further.

http://css3pie.com

Note:

Don't forget to use position (relative or absolute) where we are using Border-radius, gradients and box shadows.
Don't forget to use behavior:url(xhtml_folder/PIE.htc);
And the important thing is don't forget to put the PIE.htc in xhtml folder.

Does not work border-radius IE8

3 Answers3

You should be sure that you have included PIE.htc correctly (important!)

Relative questions

Apply gradients in IEs):

Apply border-radius in IEs):

You should be sure that you have included `PIE.htc` correctly (important!)