CSS3 Borders

« Previous Chapter Next Chapter »

CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.

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

  • border-radius
  • box-shadow
  • border-image

Browser Support

Property Browser Support
border-radius -moz-
box-shadow -moz- -webkit- -webkit-
border-image -moz- -webkit- -webkit-

Internet Explorer does not yet support the new border properties.

Firefox requires the prefix -moz-.

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

Opera supports the new border properties.

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:

This box has rounded corners!

Example

Add rounded corners to a div element:

div
{
border:2px solid;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}


CSS3 Box Shadow

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


Example

Add a box-shadow to a div element:

div
{
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
box-shadow: 10px 10px 5px #888888;
}


CSS3 Border Image

With the CSS3 border-image property you can use an image to create a border:

The border-image property allows you to specify an image as a border!

Example

Use an image to create a border around a div element:

div
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;
}


New Border Properties

Property Description CSS
border-image A shorthand property for setting all the border-image-* properties 3
border-radius A shorthand property for setting all the four border-*-radius properties 3
box-shadow Attaches one or more drop-shadows to the box 3


« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!