Latest web development tutorials

CSS3 Border

CSS3 Border

With CSS3, you can create rounded corners, add a shadow box, and as the image of the border without using design programs such as Photoshop.

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

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

CSS3 rounded corners

Add fillets tricky in CSS2. We had to use a different image every corner.

In CSS3, it is very easy to create rounded corners.

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

This is rounded borders!

Examples

Add fillets in a div element:

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

try it"


CSS3 box shadows

The CSS3 box-shadow property is used to add a shadow:


Examples

Add box-shadow property in the div

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

try it"


CSS3 border pictures

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

border-image property allows you to specify an image as a border! Used to create the border above the original image:

Use pictures to create div border:

Border

Examples

Use pictures to create a border div

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"


New Border Properties

Attributes Explanation CSS
border-image Setting the border shorthand properties of all images. 3
border-radius One for setting all four border - * - radius shorthand property 3
box-shadow Attach one or more drop-down box shadows 3