The div that looks different in every browser

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Learn Development at Frontend Masters

It’s not that Martijn Cuppens used User Agent sniffing, CSS hacks, or anything like that to make this quirk div. This is just a plain ol’ <div> using the outline property a la:

div {
  outline: inset 100px green;
  outline-offset: -125px;
}

It looks different in different browsers because browsers literally render something differently in this strange situation.

I happened upon Reddit user spidermonk33’s comment in which they animated the offset to understand it a bit more. I took that idea and made this little video to show them behaving even weirder than the snapshots…

Direct Link →