Chapter 4: Styling with CSS
90
Styling Block Elements
There are several styles that you can apply to block elements to transform their appearance that go
beyond the typical CSS2 styles. These include three so-called experimental properties (
-webkit-
border-image
,
-webkit-border-radius
, and
-webkit-appearance
) and a CSS3 enhancement of the

background
property. These are described in this section.
Image-Based Borders with -webkit-border-image
The
-webkit-border-image
property enables you to use an image to specify the border rather than the

border-style
properties. The image appears behind the content of the element, but on top of the
background. For example:
-webkit-border-image: url(image.png) 7 7 7 7;
The four numbers that follow the image URL represent the number of pixels in the image that should be
used as the border. The first number indicates the height of the top (both the corners and edge) of the
image used. Per CSS conventions, the remaining three numbers indicate the right, bottom, and left sides.
Pixel is the default unit, though you can specify percentages.
If the image URL you provide cannot be located or the style is set to
none
, then

91
Rounded Corners with -webkit-border-radius
The
-webkit-border-radius
is used to specify the radius of the corners of an element. Using this
property, you can easily create rounded corners on your elements rather than resorting to image-based
corners. For example:
-webkit-border-radius: 10px;
This declaration specifies a 10px radius for the element, which is the standard radius value for the
Rounded Rectangle design for destination pages (see Chapter 3 ). You can also specify the radius of each
individual corner using the following properties:
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
If, for example, you wanted to create a
div
with rounded top corners, but square bottom corners, the
style code would look like the following:
div.roundedTopBox {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
Results are shown in Figure 4-8 .
Gradient Push Buttons with -webkit-appearance
The
-webkit-appearance
property is designed to transform the appearance of an element into a

Chapter 4: Styling with CSS
92
Figure 4-8: Rounded top, square bottom
The
display:block
and
width:246px
properties give the link a wide rectangular block shape.
The
-webkit-appearance: push-button
property transforms the appearance to have a gradient gray
push button look. The
-webkit-border-radius
rounds the edges using the standard 10px value.
While the shape of the push button is now set, the text needs to be tweaked using not just standard text
text-align: center;
line-height: 36px;
margin: 15px auto;
-webkit-border-radius:10px;
-webkit-appearance: push-button;
}
(continued)
c04.indd 92c04.indd 92 12/7/07 2:45:26 PM12/7/07 2:45:26 PM
Chapter 4: Styling with CSS
93
Multiple Background Images
In earlier versions of CSS, there was always a 1:1 correspondence between an element and a
background image. While that capability worked for most purposes, some page designs could not
work effectively with a single background image defined. So, in order to get around the 1:1 limitation,
designers would resort to adding extra

is defined, then this color is painted below all of the images. For
example:
div.banner {
background: url(header_top.png) top left no-repeat,
url(banner_main.png) top 6px no-repeat,
url(header_bottom.png) bottom left no-repeat,
url(middle.png) left repeat-y;
}
In this code, the
header_top.png
serves as the background image aligned to the top left portion of
the
div
element. The banner_main.png is positioned 6px from the top, while the header_bottom.png
image is positioned at the bottom of the
div
. Finally, the middle.png is treated as a repeating
background.
Setting Transparencies
Developers have long used
rgb
to specify an RGB color value for text and backgrounds. CSS3 adds
the ability to set an alpha value when specifying an RGB color with the new
rgba
declaration. Using
the
rgba
declaration, you can add translucent color overlays without transparent PNGs or GIFs. The
syntax is:
rgba(r, g, b, alpha)