border-radius causes line of bleed-through of background-color from containing element

Won’t fix Issue #3342037


Jun 25, 2015
This issue is public.
Found in build #
Reported by 8 people

Sign in to watch or report this issue.

Steps to reproduce

Reduction Fiddle:


Repro Steps:


  1. Open  in IE11 on Windows 8.1.

  2. Look at the far right edge of the dark blue "Panel title".

Actual observed incorrect behavior:

There is a light off-white-colored line on the right and/or top edge(s) of the panel. See the red-circled areas in the one screenshot. There are similar rendering artifacts on the other panels too.

Expected Results:


In the example in question, the far right edge of the dark blue “Panel title” area should be dark blue. There should not be any light off-white-colored line on the far right edge of the panel’s title.

More generally, the edges of an element with a border-radius and its own background-color should not have any artifacts where a containing element’s background-color bleeds through.

Actual Results:


Dev Channel specific:




0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

    • Note that the reduction contains a potential work-around. Removing the border-radius from the panel-heading appears to resolve this issue. Important to note that this may, or may not, impact rendering in older versions of Internet Explorer.

      See for more details.

    • Removing border-radius from the panel-heading does make the problem in the reduction look better. However, it is still visible because the containing element (panel-primary) also has a border-radius style that is rendered wrong.

      The problem is that border-radius is rendered improperly, so just removing that attribute isn’t really a workaround. The background colors might not be bleeding in anymore, but the element isn’t getting rounded anymore either.

    • Microsoft Edge Team

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

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

    • Hello,

      Thank you for providing this information about the issue. We found your sample exhibited the same behavior in other browsers. Please update this case if you can provide new information for us to consider.

      Best Wishes,
      The MS Edge Team

    • James M hasn’t supplied a list of browsers and thier results, so I thought I’d start such a thing.

      All these are on Windows 10:

      Chrome 58 - Can’t reproduce
      Firefox 53 - Can’t reproduce

      Edge 38 - Can reproduce
      IE 11 - Can reproduce

    • I am facing same issue, is there any solution for this?

    • We recently updated our OS at work to Win 10 Version 1709 OS Build 16299.492 at work and IE 11 and Edge (vers. Microsoft EdgeHTML 16.16299 and Microsoft Edge 41.16299.492.0) seem to have this problem again. Anything with a corner-radius and a background-color make the issue very visible. for example.

      Lines from the beginning of the corner radius curve are drawn across the center (masking the content) in the shape of an 'X’.

      I don’t see this on any non-microsoft browsers.

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

    Sign in