CSS3 Borders(Fg. 1)

    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

   All web browsers (excluding Internet Explorer 8 and below) supports the border-radius and box-shadow property. However, Internet Explorer does not support the border-image property. Safari 5 and older versions requires the codefix -webkit- while Opera requires the codefix -o- for the border-image property.

Fg. 1 (CSS3 Borders)

#example-one {
border-radius: 10px;
background: #BADA55;
}
#example-two {
border-radius: 10px;
border: 3px solid #BADA55;
}
div
{
border:2px solid;
border-radius:25px;
}

Fg. 2.1 (CSS3 Rounded Corners)

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

Fg. 2.2 (CSS3 Rounded Corners)

#example-one {
border-radius: 10px;
background: #BADA55;
}
#example-two {
border-radius: 10px;
border: 3px solid #BADA55;
}

CSS3 Rounded Corners(Fg.s 2)

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!

Syntax

border-radius: 1-4 length | % / 1-4 length | %;

The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left. (Fg. 2.1 & Fg. 2.2)

CSS3 Box Shadow(Fg.s 3)

The box-shadow property attaches one or more drop-shadows to the box.

This Box Has Shadows!

Syntax

box-shadow: h-shadow v-shadow blur scodead color inset;

The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0. (Fg. 3.1 & Fg. 3.2)

Fg. 3.1 (CSS3 Box Shadow)

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

Fg. 3.2 (CSS3 Rounded Corners)

div
{
box-shadow: 5px 5px 2px #080808;
}

Fg. 4.1 (CSS3 Border 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 */
}

CSS3 Border Image(Fg.s 4)

The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

Omitted values are set to their default values.

This Box Has an Image Border!

Syntax

border-image: source slice width outset repeat;

(Fg. 4.1 & Fg. 4.2)