Steps to reproduce
Please view the test case: http://jsfiddle.net/jimrajabally/beYn5/6/
To reproduce it from scratch, simply create an HTML element that has the following characteristics:
- A background color that contrasts sufficiently with the background of its parent element.
- A box-shadow that also contrasts sufficiently with the background of its parent element.
NOTE: It is better if the shadow envelops the element in all directions (i.e. box-shadow: 0 0 0 10px gray) so that you can see on which sides the outline will appear.
- An outline will appear between the edge of the element (where the border would be, if it had one) and its shadow. The outline appears in the top/left sides.
- If you set a border radius other than zero, it will appear on the right/bottom sides and on the rounded corners themselves.
- Specifying a border has no effect on the underlying problem. The border can hide the outline when using rounded corners, but if you set the border-style to dotted, you can see that the outline is still there underneath.
There should be no outline at all. This breaks some designs as it looks ugly under some circumstances.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Brian M.”
Changed Assigned To from “Brian M.” to “IPBS P.”
Changed Status to “Fixed”
Changed Assigned To from “IPBS P.” to “Christian F.”