Applying border-radius to elements cause their background image to blur

Won’t fix Issue #943470


Oct 13, 2014
This issue is public.
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:

Open the test.html in IE11 on Windows 8.1 (all latest updated).

Notice how the image is blurred.

Inspect the element (<i>) and remove the three border radius styles on it.

Notice how the image is sharp now.

The issue seems to be combination of various rules like

  • line height
  • parent element’s margin (0px is ok; auto is not)
  • *, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  • and may be more.

Expected Results:

No blur as in chrome/ff.

Actual Results:

Dev Channel specific:



0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Christian F.” to “IE F.”

      Changed Status from “Confirmed” to “Won’t fix”

    You need to sign in to your Microsoft account to add a comment.

    Sign in