Check Out This 'Square' That Renders Differently On Every Internet Browser

​To the average person, programming seems like a pretty immutable thing. You write some code, the computer executes it (or in some cases, doesn't) and you see the results on your screen. If there's one thing this simple little square developed by Belgian coder Martin Cuppens proves, is that something as seemingly straightforward as rendering a web page can be deceptively complex.

Last week, Cuppens made a single div — essentially a container that web developers use to build entire pages out of — that renders completely different on every major browser.

Now, of course, this is just a screenshot in a tweet. However, if you click through to the link in Cuppens' tweet, you'll find that he did indeed show his work.

While the HTML is about as basic as it gets, it really is just a div, the magic happens in the CSS file — where, erm, most web rendering "curiosities" happen. According to Cuppens, each browser seems to be interpreting the combination of "outline: inset" and "outline-offset" differently, rendering squares in some, a mess in Chrome and only "correctly" in Microsoft's Edge browser. To put it another way: Cuppens is defining an outline that is inset within the square by 100 pixels and then offsetting that by negative 125 pixels. Each browser seems to have a different way of rendering an inset outline that has a net negative offset value. 

While these incredible portraits made entirely with HTML and CSS, will probably degrade over time as web rendering engines are updated and changed, there's an outside chance that Cuppens' tweet going semi-viral over the weekend will ensure that every major browser will have some sort of fix for this edge case.

It's good to see, for once, someone intentionally breaking something on the internet, and the worst that happens is some lighthearted chin-scratching from everyone online. We could use more of that.