/    Sign up×
Community /Pin to ProfileBookmark

Rounded corners not working in IE

Copy linkTweet thisAlerts:
Aug 04.2010

I’m trying to get rounded corners to work in IE and am having a heck of a time. My current status is this:
I have the following in my CSS:

[CODE]
.roundedcontainedbar {
width:250px;
position:relative;
left:50px;
top:0px;
border:1px solid #666;
background:#999;

-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
behavior:url(/includes/border-radius.htc);
}
[/CODE]

With it like that, the content of:

[CODE]
 <div class=”roundedcontainedbar”>
Div 1<br>
Div 1
</div>
[/CODE]

is visible, but the box itself is not.
If I take out the position, left, and top lines, it appears! (That is, if I’m emulating IE7.) But then the whole box is rounded and not just the top corners. (Also, that prevents me from using relative positioning.)

Any ideas on what I can do to make top-corners-only rounding work in IE, and let me use positioning?
Thanks for any feedback.
Liam

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@kiwibritAug 04.2010 — I think you are trying to use a CSS3 feature (border-radius) not supported by IE - and that to get the rounded corner effect you'll have to use graphics.

I've not taken much interest in CSS3 - I take it that -moz-border-radius and -webkit-border-radius are proprietary code?
Copy linkTweet thisAlerts:
@KorAug 05.2010 — <i>
</i>behavior:url(/includes/border-radius.htc);

Yes, this the cross-browser workaround for IE, but that solution is a server-side one, and some conditions must be fulfilled:

  • - the code works only under a server. If locally, you should emulate a server on your computer.

  • - make sure that the relative path to the HTC file is correct

  • - the code will work in IE only if all the 4 corners are rounded (I am not sure for the latest version of HTC).

  • - make sure you have the updated version of the htc file:

    http://curved-corner.googlecode.com/files/border-radius.htc
    • Copy linkTweet thisAlerts:
    @mechphistoauthorAug 05.2010 — <i>
    </i>behavior:url(/includes/border-radius.htc);

    Yes, this the cross-browser workaround for IE, but that solution is a server-side one, and some conditions must be fulfilled:

  • - the code works only under a server. If locally, you should emulate a server on your computer.

  • - make sure that the relative path to the HTC file is correct

  • - the code will work in IE only if all the 4 corners are rounded (I am not sure for the latest version of HTC).

  • - make sure you have the updated version of the htc file:

    http://curved-corner.googlecode.com/files/border-radius.htc
    • [/QUOTE]

    Thanks for the reply. But as I mentioned:

    "If I take out the position, left, and top lines, it appears! (That is, if I'm emulating IE7.) But then the whole box is rounded and not just the top corners."

    So yeah, I have the latest file, on the server, and the path is right, because it works. My complaint was that it's rounding all four corners, not just the top two.

    If that's a built-in, non-changeable property of using the HTC file for IE, well, I guess I'm SOL until (presumably) IE9 comes out.

    Thanks for taking the time to reply. ?
    Copy linkTweet thisAlerts:
    @KorAug 06.2010 — I have to add something:

  • - At least under Win7, I see that the htc file is loaded locally, as well

  • - In some cases, the rounded elements does not appear in IE if one of the parent Nodes has a certain beckground. The solution is to give the immediate parent (or the next - things look strange, as there is no precise "rule") a certain CSS position, usually [B]relative[/B].

  • - In some cases (form's buttons), IE doubles the border with an ugly, new square one (if the element has already a certain CSS border). The solution is to change the border using another hack:
    <i>
    </i>&lt;!--[if lte IE 7]&gt;
    &lt;style type="text/css"&gt;
    .buttonClass{
    border:none;
    }
    &lt;/style&gt;
    &lt;![endif]--&gt;

    This code can be placed anywhere, but [I]under[/I] the main embedded or external CSS of the document.
    • Copy linkTweet thisAlerts:
    @Major_PayneAug 06.2010 — Be sure you have the latesest version of css3PIE for IE installed. Some people were having problems with earlier version when using IE 8. Their demos worked just fine in IE 7/8 for me.
    ×

    Success!

    Help @mechphisto spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.20,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...