Inner shadow radius calculation adds, rather than subtracting, spread distance

Fixed Issue #12515080


Chris M.
Jun 27, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Fixed in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Use a positive border-radius and a box-shadow with inset and positive spread distance, such as this:

div {
    border-radius: 1em;
    box-shadow: inset 0 0 0 1em rebeccapurple;

From the spec:

To preserve the box’s shape when spread is applied, the corner radii of the shadow are also increased (decreased, for inner shadows) from the border-box radii by adding the spread distance (and flooring at zero).

All browsers are increasing the corner radii by the spread distance for outer shadows; well and good.

But Edge (and IE 11) are, for inner shadows, increasing, rather than decreasing, the corner radii. This winds up with a very ugly inset box-shadow with border-radius.

POC attached. It renders fine in other browsers but badly in Edge and IE 11.


Comments and activity

  • Changed Steps to Reproduce

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Christian F.”

    Changed Status to “Confirmed”

    Changed Assigned To from “Christian F.” to “Brian M.”

    Changed Status from “Confirmed” to “Fixed”

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

Sign in