CSS - Backgrounds and borders

Backgrounds and borders

Back to the index.

The backgrounds and borders.

This is the desktop table. See also the mobile table.

Last major update on 1 July 2016.

I'm writing a CSS book.

Backgrounds

Method or property	Internet Explorer				Edge 13	Firefox		Safari	Chrome		Opera		UC 5.6
Method or property	8	9	10	11	Edge 13	47 Win	47 Mac	9.1.1	51 Win	51 Mac	38 Win	38 Mac	UC 5.6
background-attachment States whether the background image scrolls with the document, the element, or not at all.	Incomplete	Yes				Yes		Yes	Incomplete	Yes	Yes		Buggy
	Incomplete browser does not support `local`. Incorrect `scroll` means `local`. `local` doesn’t work on Chrome/Windows 10, while it does work on Windows 7. Like on Android, Windows 10 needs a `border-radius` added to the element (and no, `0` is not enough.) On UC `fixed` works as normal, except that when you scroll the element the background also scrolls.
background-clip States whether the background covers the border-box (default), padding-box or content-box.	No	Yes				Yes		Yes	Yes		Yes		Yes

-webkit-background-clip: text The background shines through the text, if it’s transparent, and only through the text.	No				Yes	No		Yes	Yes		Yes		Yes

background-color	Yes					Yes		Yes	Yes		Yes		Yes
background-color
background-image	Incomplete	Yes				Yes		Yes	Yes		Yes		Yes
background-image	IE8 and lower do not support multiple background images.
Method or property	Internet Explorer				Edge 13	Firefox		Safari	Chrome		Opera		UC 5.6
Method or property	8	9	10	11	Edge 13	47 Win	47 Mac	9.1.1	51 Win	51 Mac	38 Win	38 Mac	UC 5.6
background-origin States whether the background originates in the border-box, padding-box (default) or content-box.	No	Yes				Yes		Yes	Yes		Yes		Yes

background-position States how the background image is positioned.	Almost	Yes				Yes		Yes	Yes		Yes		Yes
	IE8 doesn’t support the `right 20px bottom 10px` syntax.
background-position-x and -y States how the background image is positioned in the x or y direction.	Yes					No		Yes	Yes		Yes		Yes

background-repeat States how the background is repeated.	Yes					Incomplete		Yes	Yes		Yes		Yes
background-repeat States how the background is repeated.	Firefox doesn’t support `space` and `round`.
background-size States the size of the background image, in pixels, percents, or with two special values.	No	Yes				Yes		Yes	Yes		Yes		Yes

Method or property	Internet Explorer				Edge 13	Firefox		Safari	Chrome		Opera		UC 5.6
Method or property	8	9	10	11	Edge 13	47 Win	47 Mac	9.1.1	51 Win	51 Mac	38 Win	38 Mac	UC 5.6

Other

Method or property	Internet Explorer				Edge 13	Firefox		Safari	Chrome		Opera		UC 5.6
Method or property	8	9	10	11	Edge 13	47 Win	47 Mac	9.1.1	51 Win	51 Mac	38 Win	38 Mac	UC 5.6
border-radius	No	Yes				Yes		Yes	Yes		Yes		Yes
border-radius
box-decoration-break	No					Yes		-webkit-	-webkit-		-webkit-		-webkit-
box-decoration-break	Only Firefox supports it on elements in columns.
box-shadow	No	Yes				Yes		Yes	Yes		Yes		Yes
box-shadow

Tested browsers

Desktop browser test array 3.0; July 2016

IE 8, 9, and 10: Trident; On separate Windows 7 virtualizations as downloaded from Modern IE.
IE11: Trident; On Windows 8.1 virtualization as downloaded from Modern IE.
Edge 13: MS Edge 13; On Surface Book with Windows 10.
Firefox 47: Gecko 47; 47.0.1 on Win10 and Mac
Safari 9.1.1: WebKit; 9.1.1 on Mac
Chrome 51: Chromium 51; 51 on Win10 and Mac
Opera 38: Chromium 51; 38 on Win10 and Mac
UC 5.6: Chromium 48; 5.6 on Windows 7

Operating systems

Mac: Mac Mini with OS 10.11.15; This is my main test station. It also runs all virtual Windows systems.
Windows 7 and 8.1: All downloaded from modern.ie. I use Parallels, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
Windows 10: Microsoft Surface Book with Windows 10

Not tested

I did not test border-image because it’s WAY too complicated.