Introduction

In this article, we will showcase some examples made using the new properties in the W3C's CSS3 Backgrounds and Borders specification. We recommend using Opera 10.5x or later to view these examples in their full glory.

• background-clip
• background-origin
• border-radius
• Multiple background images
• background-attachment
• box-shadow
• border-image

You might also be interested in our CSS3 transitions and 2D transforms article, which covers other features that made their debut in Opera 10.50.

background-clip

The first CSS3 property that we'll introduce is background-clip. This property is used to determine whether the background image extends into the border or not.

There are two options, the default border-box and padding-box. When border-box is used, the background image will extend to the border and will therefore show up behind the border, as in Figure 1. The other option is padding-box which means the background image won’t stretch to the border. The image will simply appear until the edge of the padding, as shown in Figure 2.

Figure 1: background-clip: border-box;

Figure 2: background-clip: padding-box;

In essence, padding-box clips the background image to the padding box while border-box clips the background image to the border. Screenshots of background-clip and background-origin show you how it looks if your browser does not support this CSS3 property.

Note that Gecko and WebKit are still using properties with a vendor prefix: -moz-background-clip and -webkit-background-clip, respectively. Gecko is also using the old property value without the -box suffix. Therefore, instead of padding-box, Gecko uses padding for the same effect.

background-origin

The background-origin property is used to determine how the background-position of a background in a certain box is calculated.

When you position a background image, background-origin allows you to specify your starting point. The default padding-box positions the background image relative to the outer edge of the padding (inner edge of the border), whereas border-box positions the background image relative to the outer edge of the border. There is also the value content-box which, not surprisingly, positions the background image relative to the outer edge of the content (inner edge of the padding).

For example, a background image positioned 10px from the left and top will show in the following positions using the different values for background-origin:

Figure 3: background-origin: border-box;

Figure 4: background-origin: padding-box;

Figure 5: background-clip: padding-box; background-origin: border-box;

Figure 6: background-clip: padding-box; background-origin: padding-box;

If your browser does not support this feature yet, you can take a look at the background-clip and background-origin screenshots.

Daniel Davis has another example and explanation of CSS3 background-clip and background-origin.

Similar to background-clip, Gecko and WebKit are still using their own properties for background-origin: -moz-background-origin and -webkit-background-origin, respectively. Gecko is also using the old property value without the -box suffix. Instead of padding-box, Gecko uses padding for the same effect.

border-radius

The highly-awaited border-radius has arrived! We can now create rounded corners for our elements, just like the ones below.

border-radius is the shorthand for:

• border-top-left-radius
• border-bottom-left-radius
• border-top-right-radius
• border-bottom-right-radius

Let's dive into some examples.

border-radius: 25px;

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;	
border-top-left-radius: 10px;
border-top-right-radius: 10px;

border-bottom-right-radius: 120px;

border-radius: 120px 20px;

border-radius: 120px / 20px;

background: url(image/japanese_tile.jpg);
border-radius: 30px;

To check whether your browser supports border-radius correctly you can compare the original border-radius example with the border-radius screenshots. Patrick Lauke and Vadim Makeev have created a border-radius picker that helps you to generate a one-liner border-radius code.

Gecko and WebKit still use the border-radius properties with separate -moz- and -webkit- prefixes, respectively.

Multiple background images

CSS3 allows multiple backgrounds on a single element. This is done by defining multiple background images. You can achieve the effect using either the background-image or shorthand background properties.

Example 1

In the first example, we show you how to merge three background images into one using the background property.

Figure 7: Three individual background images

By defining the background images in order, they overlap each other. The W3C spec says

The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers. Note that the border-image properties can also define a background image, which, if present, is painted on top of the background created by the background properties.

You can view the multiple background image example here. The results can be seen in figure 8.

Figure 8: Screenshot of a combined background image using multiple background images

background:
  url(rose.png) no-repeat 150px -20px,
  url(driedrose.png) no-repeat,						
  url(fieldsky.jpg) no-repeat;

Example 2

Alternatively, you can use the background-image property to create a background with multiple images.

In this second example we show you how to create the sliding doors technique using only background-image. This time there's no need for extra nested blocks. Together with background-repeat and background-position, Patrick Lauke shows us how sliding door buttons are created using multiple background images.

Figure 9: Screenshot of the sliding doors technique using multiple background images

background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;

background-attachment

The background-attachment property determines if a background image is fixed or scrolls with the rest of the page. It happens when we define how a background image is attached to a viewport. Background images can be fixedto a viewport or can scroll along with the element or with its contents via local.

See Vadim Makeev's background-attachment demo. He has created three sections to demonstrate how fixed, scroll and local are affected when we scroll the viewport and the full document.

Figure 10: Screenshot of our background-attachment example

The local value for background-attachment is new in the W3C's CSS3 border and background specification. At the time of writing, it is not yet supported in public releases of Firefox and Safari.

box-shadow

Box shadow allows shadow effects on elements. This property takes several values:

• The first value indicates the horizontal offset of the shadow. You can use a negative value to put the shadow to the left of your box.
• The second value indicates the vertical offset. You can use a negative value to put the shadow above your box
• The third value is the blur radius. The bigger the value, the more blurred it is.

Additionally, you can give the shadow color, spread and offset values. Let's look at some examples.

box-shadow: 10px 10px 20px #000;

box-shadow: 10px 10px 1px #000;
/* Blur radius is set to just 1 */

box-shadow: 10px 10px 20px #FE2E2E;
border-radius: 20px;
/* Sexied up with pink and border-radius */

box-shadow: 20px 20px 10px 10px;
/* The spread value set to 10 pixels making the shadow bigger */

box-shadow: -10px -10px 20px inset;
/* The inset value creates an inner shadow */

To check whether you're looking at the correct box-shadow implementation, please see the CSS3 box-shadow screenshots and example here.

Example

If you like a kick in your tea, add some box-shadow, transforms, transitions, RGBa, query selectors and :lang(). Enjoy the steaming hot CSS3 box-shadow effects by Vadim Makeev.

Figure 11: Teacup using box-shadow and other CSS3 effects

The box-shadow property only works on Gecko and WebKit with a -moz- and -webkit- prefix, respectively.

border-image

Using the border-image property, you can use an image to act as an element's border. Images can be set to stretch, repeat or round.

border-image: url(molecule.png) 50 stretch;

border-image: url(molecule.png) 50 stretch;

The stretch and repeat values are fairly self-explanatory. The round value still repeats the image but compresses the image to fit the element width without showing only parts of the image itself. See Vadim Makeev's animated showcase of CSS3's border-image to get an idea of how the effect works. Screenshots are shown below.

Figure 12: border-image: stretch screenshot

Figure 13: border-image: repeat screenshot

Conclusion

We hope you enjoyed reading and trying out these new CSS3 implementations. They run on Opera 10.5x+, and other standards-aware browsers.

Credit goes to Daniel Davis and Patrick Lauke for their wonderful demos and David Storey for his suggestions and ideas.