1. Home
  2. CSS3 Border

The best CSS3 Border Tutorial In 2024, In this tutorial you can learn CSS3 Border,CSS3 rounded corners,Examples,CSS3 box shadows,Examples,CSS3 border pictures,Examples,New Border Properties,

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;
}


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;
}


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 */
}


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

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 Border
10/30