Child

A Css3 border is such an affords of style sheet which reduces the human efforts of Photoshop and other graphical applications. An individual can create the rounded borders, border shadow, imaged based border and e.t.c with the help of css3 border features.

Basically We use three features to create the border:

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

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:

Example

Here is the code:

#div_border
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 Box Shadow

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


Example

Here is the code:

div
{
width:300px;
height:100px;
background-color:#a54003;
-moz-box-shadow: 10px 10px 5px #888888; /* Old Firefox */
box-shadow: 10px 10px 5px #888888;
}

CSS3 Border Image

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

Example:

Here is the code:

#round
{
height:50px;
margin-bottom:25px;
border-width: 15px;
border-image:url(your image file name with path) 25 25 round;
-moz-border-image:url(your image file name with path) 25 25 round; /* For Firefox/Mozilla */
-webkit-border-image:url(your image file name with path) 25 25 round; /* For Safari and Google Chrome */
-o-border-image:url(your image file name with path) 25 25 round; /* For Opera */
}

#stretch
{
border-width: 15px;
height:50px;
-moz-border-image:url(your image file name with path) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(your image file name with path) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(your image file name with path) 30 30 stretch; /* Opera */
border-image:url(your image file name with path) 30 30 stretch;
}