Someone created a div that looks different on every browser

Here's a weird CSS anomaly that you might have missed - Martijn Cuppens, a software engineer, has created a div that looks different on every browser.

Cuppens shared his creation on CodePen - you can see the code for yourself here.

Here's what they look like on different browsers:

https://twitter.com/Martijn_Cuppens/status/1015169981368225793

Note: If you're looking on an iPhone the differences won't appear as all browsers on the iPhone are essentially the same - app store restrictions mean they use the same rendering engine.

According to Cuppens, the most 'correct' version is Edge. He explains that he came across the discovery by saying that he "wanted to know if there is a way to inset outlines... turned out 'inset' was a outline-style and a negative outline-offset can be used to inset outlines."

https://twitter.com/Martijn_Cuppens/status/1015579527379070976

What Cuppens experiment shows is how widely browsers can vary in their interpretation of CSS. On Twitter, users responded with their own versions, like this:

https://twitter.com/frivoal/status/1015533567839911936

Others, meanwhile, were happy to offer droll responses to the challenges and occasional woes of working with CSS...

https://twitter.com/kingreza/status/1015360236230606848



Read next

Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more

Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more