Bugs Out of Nowhere With a Black Border

A black border around “input” and “select” in Chrome – where it comes from and how to remove it.

Every developer wants all bugs to be found during testing. There are many reasons why that is impossible. Using a specific example, we will show you how bugs can occur even in a project that has been tested and has not changed since.

In mid-2020, many users started to notice black borders on various sites. They often looked so out of place that it was obvious that it was a bug and not a design element.

Edit Text Black Border

This is a screenshot from https://apply.whitehouse.gov/. It can’t be said with complete certainty that this is not a design element.

Pre-Loader Black Border

But this download icon on https://ads.google.com/ leaves no doubt that it’s a bug.

Where is the black border on input coming from?

This problem has arisen among users of the new version of Chrome 83. The developers decided to set the default value of the rarely used Outline property as an outline: -webkit-focus-ring-color auto 1px; Even without CSS knowledge, you can understand that it sets a 1-pixel border with automatic color selection. Hence the result.

What conclusion can be drawn from this story? Even in a perfectly designed and tested product, bugs can appear due to the release of a new version of the software or devices on the user’s side. You can’t prevent it, you can only react quickly. That’s why it is very convenient to have a remote team of testers who can quickly and professionally detect errors at the right time.

How to remove the black border on input and select?

The solution to the problem is very simple, just set the property in CSS: focus {outline: -webkit-focus-ring-color auto 1px;} But it is worth noting that neither on https://ads.google.com/ nor on https://apply.whitehouse.gov/ has this been done for 3 months.