An (Almost) Complete Guide to CSS3 Borders & Backgrounds

Filed October 4th, 2010 under CSS and Tutorial

Borders and backgrounds are two of the most essential CSS elements. They are part of the groundwork that allow us to create aesthetically rich user interfaces, and help make the web a beautiful place to be.

But CSS2.1 has proven inadequate in a number of respects. Remember the rounded corners fad (we even use it on kmsm.ca)? For a long time, that was driven via div and image hacks – creating lots of unnecessary and unpleasant code. CSS3 adds native support for these types of elements. In this guide, I provide an overview of the borders and backgrounds module in clear, easy-to-understand language.

W3C Specification: http://www.w3.org/TR/css3-background/

Browser Specific Support

WebKit support: Strong

Firefox support: Strong

IE9 support: Medium

Backgrounds

Let’s dig right in.

CSS3 introduces two new important elements to backgrounds: multiple images, and background size. In brief, multiple backgrounds is exactly as it sounds: you can layer multiple backgrounds in a single box. Before the advent of CSS3 this had to be done using a combination of layered divs. Thankfully, that’s changed.

Multiple backgrounds

Each box has a background layer that may be fully transparent (the default), or filled with a color and/or one or more images.

W3C Specification

To create a box with multiple backgrounds, we simply define them in a comma-separated list using the background-image element. All other assigned properties, such as background-position require similar comma-separation. For example:

#multipleBackgrounds {
	background-image: url(flower.png), url(ball.png), url(grass.png);
	background-position: center center, 20% 80%, top left;
}

In this case, we’ve got an image of a flower located in the middle of the box, layered over a ball located 20% from the top and 80% to right, layered over grass located in the top left. Stories in Flight has a particularly good working version of exactly this example: CSS Multiple Backgrounds.

Now, this might not seem like much – after all, you can always layer images in Photoshop – but it creates really interesting possibilities when combined with other CSS3 techniques (i.e. gradients). Imagine, for example, that you want to create a repeating background of a texture – but also have the page slowly fade to black as it approaches the bottom of the screen. With CSS2.1, this was possible only by first creating a repeating image of the texture, placing it in a div, and layering a secondary div over top, which itself has a horizontally repeating image of a gradient. Now, we can use a single div, and define both backgrounds at once (and even skip creating an image of a gradient altogether).

Oh and one last note: no vendor prefixes are necessary!

Background size

Let’s say you’d like to dynamically resize the background for the body element of a page – such that the background image is always proportionally scaled to the size of the browser window. CSS3 makes this easy. We’ll have to use some vendor prefixes though.

#backgroundSize {
	-webkit-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
}

Alternatively, we can use contain to limit the background to the inside of the background positioning area (an area you can define in a couple of different ways using background-origin).

Another interesting technique for background-size is defining it as 100%. We can achieve some really cool effects this way. Peter Gasston covers one such example in his article Liquid Faux Columns with Background-Size.

Borders

Border image

As one of the less intuitive new elements in CSS3, border-image is prone to confusion. I’ll try and clear that up.

We start by defining an image, where the image should be sliced horizontally and vertically, and end by declaring a type (repeat, round, stretch). Again, we’re going to have to use vendor prefixes:

#borderImage {
	-moz-border-image:url(border.png) 20 20 round;
	-webkit-border-image:url(border.png) 20 20 round;
	border-image: url(border.png) 20 20 round;
}

Let’s break this down visually. In the image below, we see border.png on the left. We’ve sliced it vertically (slice a) at 20px, and sliced it horizontally at (slice b) at 20px. The image is then used as the border, and repeated along the slice lines. Note that you define up to four slices, in the canonical directions (top, right, bottom, left).

As you can imagine, there are some really innovative applications in store for this element. lrbabe.com has some excellent examples of potential applications for everything from multi-state buttons to tabs.

Border radius

That brings us to border radius, perhaps the most welcome element in the borders & backgrounds module.

We’re going to have to use some vendor prefixes again, but that’s okay – we’ve been dying to be able to do this natively for so long, it hardly matters. And it’s really as easy as could be. First, define a border in the typical way (size, type, color), then define a border-radius:

#borderRadius {
	border: 5px solid #000;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

In this example a radius of 15px will be applied to each corner (top left, top right, bottom left, bottom right). But we’ve also got fine control of each corner:

#borderRadius {
	border: 5px solid #000;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-webkit-border-bottom-right-radius: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 15px;
}

And with that, we say goodbye to everything from div hacks, to JavaScript, to images in order to get those oh so fashionable rounded corners.

Box shadow

One other interesting new feature from this module is box shadow. Again, it’s simple, straightforward, and clear. To apply a shadow to a box – say a div – we define a horizontal offset, a vertical offset, an optional blur distance, and a color. For example:

#boxShadow {
	width: 100px;
	height: 100px;
	box-shadow: 15px 15px 5px #000; 
}

This produces a 100px square box, with a black shadow 15px horiztonally and vertically offset with a 5px blur. I mentioned it was easy, didn’t I?

Other Resources

Quirksmode: Backgrounds

Introduction to CSS3 – Part 6: Backgrounds

This article is part of a series on CSS titled An (Almost) Complete Guide to CSS3 regularly posted biweekly at kmsm.ca. If you enjoyed this article, you might also enjoy An (Almost) Complete Guide to CSS3 Multi-Column Layouts.

Joshua Kelly
Director of Human/Machine Synthesis

10 Responses

§ DesignMango wrote on October, 4th:

Wow an amazing summary. Thanks

§ Freelance Web Design wrote on October, 5th:

Thanks for article!
Medium support in IE9 means that it does not support CSS3 borders and backgrounds fully? That sucks!!

§ adi wrote on October, 5th:

thanks. informative stuff

§ Jeremy Carlson wrote on October, 5th:

Didn’t know about the background-size. I knew you could call multiple backgrounds, but didn’t know how. That is really easy. Do you have to call the properties like that though? Or can you do it shorthand…meaning background, rather than background-image (and position)?

§ Daniel wrote on October, 9th:

@Jeremy – shorthand is supported, check it here:

http://www.w3.org/TR/css3-background/#the-background

cool stuff, good post, using on a Google TV project rt now.

§ Phil wrote on March, 1st:

Wouldn’t it be great if browser vendors could agree to adopt the same new standards.

Leave a Reply