IE11 rounded-corner bug

Home / IE11 rounded-corner bug

Last month, I made a blog post detailing how to use CSS arrows as a progress indicator. I really like this and use it whenever I’m asked to create a wizard-like interface.

However, I discovered, after finally updating from IE9 to IE11 that there is a specific IE11 bug that reared its ugly head.

The gist of the bug is that if you have an element with rounded corners against another element, there will be a small line drawn between the elements. In the case of the CSS arrows, it winds up looking like this:

How can this be fixed though? There are some CSS hacks that can detect IE11 and newer and adjust accordingly. In the case of the “small arrow,” it uses “left: -15px” to create the arrow against the block body effect with outline. Oddly, changing this to “left: -14.92px” appears to alleviate the IE11 bug.

By using the pseudo “-ms-fullscreen” and “:root” elements, we detect IE11. Beyond that, it’s just adjusting the left (and right) positioning on the element in front of the anchor body by 1px:

/* IE11 border bug fixes... hooray! */
_:-ms-fullscreen, :root .wizard.small.left-arrow a:before {
    left: -14px;

_:-ms-fullscreen, :root .wizard.small:not(.left-arrow) a:after {
    right: -14px;

_:-ms-fullscreen, :root .wizard.left-arrow a:before {
    left: -29px;

_:-ms-fullscreen, :root .wizard:not(.left-arrow) a:after {
    right: -29px;

Here’s an updated pen that shows the fix (view in IE11):

Leave a Reply