CSS3 Borders

Internet Explorer 9 supports border-radius and box-shadow.

Firefox supports all of the new border properties.

Chrome and Safari support border-radius and box-shadow, but require the prefix -webkit- for border-image.

Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.

CSS3 Rounded Corners

-moz-border-radius:25px; /* Old Firefox */

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

-moz-box-shadow: 10px 10px 5px #888888; /* Old Firefox */
box-shadow: 10px 10px 5px #888888;

CSS3 Border Image

-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;

CSS3 Backgrounds

Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property.

Safari 4 requires the prefix -webkit- to support the new background properties.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties.

Resize a background image:

-moz-background-size:80px 60px; /* Old Firefox */
background-size:80px 60px;

Stretch the background image to completely fill the content area:

-moz-background-size:100% 100%; /* Old Firefox */
background-size:100% 100%;

CSS3 The background-origin Property

The background-origin property specifies the positioning area of the background images.

The background image can be placed within the content-box, padding-box, or border-box area.

Position the background image within the content-box:

background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */

CSS3 Multiple Background Images

CSS3 allows you to use several background images for an element.

Set two background images for the body element:


CSS3 Text Effects

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:



Internet Explorer does not yet support the text-shadow property.

Firefox, Chrome, Safari, and Opera support the text-shadow property.

All major browsers support the word-wrap property.

text-shadow: 5px 5px 5px #FF0000;

Allow long words to be able to break and wrap onto the next line:

p {word-wrap:break-word;}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s