CSS3 Border

CSS3 Border

With CSS3, you can create rounded borders, add box shadows, and use images as borders without using design programs like Photoshop.

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

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

CSS3 Rounded Corners

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

In CSS3, it is easy to create rounded corners.

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

This is a rounded border!

Example

Add rounded corner elements in the div:

div
{
border:2px solid;
border-radius:25px;
}

Try it Yourself »

CSS3 box shadow

The box-shadow property in CSS3 is used to add shadows:


Example

Add the box-shadow property to the div

div
{
box-shadow: 10px 10px 5px #888888;
}

Try it Yourself »

CSS3 border images

With CSS3's 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! The original image used to create the above border:

Create a border in a div using an image:

Border

Example

Create a border in a div using an image

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Try it Yourself »

New border properties

Property Description CSS
border-image Set the shorthand property for all border images. 3
border-radius A shorthand property for setting all four border-*-radius properties 3
box-shadow Attach one or more drop shadows to the box. 3
other extensions