Member Avatar for ctkam

Hi anyone know how to make round corner in IE? This code only works in Mozilla

.login {
background:#0C3;
box-sizing: border-box;
width: 40em;
height: 20em;
border-radius: 0.5em 2em 0.5em 2em;
-webkit-border-radius: 0.5em 2em 0.5em 2em;
}

Thankx in advance

  • 6 Contributors
  • 6 Replies
  • 101 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Biiim

Dani AI

Generated

IE8 does not implement CSS3 rounded corners; native support starts with IE9. That explains ’s observation and matches ’s note. For modern reference see the MDN summary of border-radius and current support data on Can I Use: border-radius (MDN) and browser support (Can I Use).

Practical options (pick one by project constraints):

  • Progressive enhancement: keep the border-radius rules for modern browsers and let IE8 show square corners. This is the least work and often acceptable.

  • Emulation with a polyfill (HTC/JS): libraries exist that emulate CSS3 in IE8 by using VML; they work but require following their docs (note: behavior: url(...) paths and server MIME type can be tricky).

  • IE-only image fallback: serve an alternate stylesheet to IE8 via conditional comments and use small corner images (or a 2x2 sprite) positioned in the four corners. Example pattern:

    <!--[if lt IE 9]>
    <link rel="stylesheet" href="/css/ie8-fallback.css" />
    <![endif]-->

    .login { position: relative; background: #0C3; }
    .login .corner { position: absolute; width:12px; height:12px; background: url("/images/corner-sprite.png") no-repeat; }
    .login .corner.tl { left: 0; top: 0; background-position: 0 0; }
    .login .corner.tr { right: 0; top: 0; background-position: -12px 0; }
    .login .corner.bl { left: 0; bottom: 0; background-position: 0 -12px; }
    .login .corner.br { right: 0; bottom: 0; background-position: -12px -12px; }

Troubleshooting and notes: confirm a standards DOCTYPE (quirks mode breaks behavior), old Firefox needs -moz- prefixed rules (as reminded), the HTC approach requires the correct text/x-component MIME type and an accurate path (behavior URLs are resolved oddly in IE), and conditional comments apply only to IE9 and earlier. As and suggested, HTC/JS solutions or heavy cross-browser scripts will work but add weight; ’s point that native rounding arrives in IE9 is a good reason to prefer progressive enhancement where feasible.

Recommended Answers

All 6 Replies

Member Avatar for lps

Try research into "filter:" of IE. I do not sure of it but it can be reconfigured to match other browsers' plugin

Member Avatar for drjohn

Which version of IE doesn't it work in?
It should work in IE9 but not IE8 or earlier, as they don't support border-radius

There is an easy solution to getting earlier IEs to do css3, here http://css3pie.com/ . I've tried it and it works very nicely. Just read the documentation.

Also, that code will not work in earlier versions of firefox, as for them you also need the -moz-border-radius code as well.

Member Avatar for ctkam

Hi Dandello
Tried that still not work.

Hi drjohn
I'm using IE8.

thank you for helping providing the links. In the end i have to use image :(

Member Avatar for jalarie

If you don't mind using a LOT of code to do it easily and in every browser, go here:

Member Avatar for Biiim 
-ms-border-radius: 0.5em 2em 0.5em 2em;

is the css set for ie9, unfortunately ie8 and under just doesn't support it. You have to make a corner image for each corner and position them in html otherwise

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.