CSS outline-width property breaks focus outlines.

Issue #14200090 • Assigned to bbrinza


Oct 12, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

According to MDN: “The outline-width CSS property sets the width (thickness) of an element’s outline.”

In Edge, setting the outline-width property causes elements to stop drawing focus rings entirely.

Example: http://jsbin.com/tegisinedo/1/edit?html,output

Tabbing to this element should draw a 20px wide focus outline. Instead it doesn’t draw any focus outline at all. If you remove the outline-width property then tabbing to the element draws the default focus outline.


0 attachments

    Comments and activity

    • It looks like this is a differing opinion between the browsers.

      In Chrome and Firefox if you set outline-width, it will use the default focus indicator and just change its width.

      In Edge if you set outline-width it will remove any default styling so it appears as if it’s gone. If you additionally set outline-style: solid, then the ring reappears and properly applies outline-width.

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “bbrinza”

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

    Sign in