Want to use CSS to make a nice repeating gradient pattern like this? Not in Chrome!
It's 2015 and we still have to use tiled background images for things like this, all because Chrome can't fix one of the most basic CSS3 features.

How about displaying standard Unicode Emoji in color? Maybe in black and white if you're lucky, maybe just some broken boxes though...
Yes, you can easily do this with images, but that makes about as much sense as making all your ASCII text images too.
It breaks cross-application compatibility as well as things like screen readers. Plus, unless you're using SVG, images don't scale as well on HiDPI screens.

Ok, this also requires an OS with color emoji support (Windows 8.1, OS X 10.7, iOS 6, Android 4.4), but all other browsers work if the OS support is there.
Older OSes (Such as Windows 7 and Android 4.1) still support emoji fonts at a system level, they just only have black and white fonts.

What about CSS support for nice hairline borders on HiDPI devices by using a half-pixel border? You get no border at all, even with the half pixel set in a fallback!

At least IE falls back to a single pixel (2 device pixels). How about faking it with a box shadow? Still nothing, but at least this works in IE perfectly.

There is a pretty convoluted hack for Chrome though: remove the actual border and use a :before pseudo-element with a 50% transform of a 1px border.
Unfortunately, this hack removes the ability to select the text, so it can't be used on form controls.

An even more convoluted hack which doesn't mess with text selection requires border-image, which has several downsides:
While it works in Firefox and Chrome, it requires IE11 to work in IE.
Also, it requires either an external image, or embedded base64 PNG data in the CSS, both of which make it very hard to change the border color later on.
I had to write this function to generate a PNG with the specified color on the fly.

<?php
function png_chunk($data) {
	return pack('N', strlen($data) - 4) . $data . pack('N', crc32($data));
}
function generate_hairline_data($color) {
	$png = "\x89PNG\x0D\x0A\x1A\x0A" .
		png_chunk("IHDR\x00\x00\x00\x06\x00\x00\x00\x06\x01\x03\x00\x00\x00") .
		png_chunk('PLTE' . pack('CCC', $color[0], $color[1], $color[2]) . "\xFF\xFF\xFF") .
		png_chunk('tRNS' . pack('C', $color[3]) . "\x00") .
		png_chunk("IDATx\xDAc\x60\x60\xA8\x80B\x06\x00\x0BL\x01\xE1") .
		png_chunk('IEND');

	return 'data:image/png;base64,' . base64_encode($png);
}
?>
div.halfpixelborderimage {
	border-image: url('<?=generate_hairline_data(array(0, 0, 0, 255))?>') 2;
}

If you don't have a HiDPI display (192dpi on Windows, Retina on Apple) none of these will display right for you anyway, because it would normally be behind a CSS media query.