The CSS border properties allow you to specify the style and color of an element’s border. Here is a guide to all CSS border style properties with small demo.

1. Simple  Border

This Border style is simple and highly used. In this border we use  border 1pixels solid in black color . This results in :

The CSS of this image

{code type=css}

.simple{
border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;
}

{/code}

2. Polaroid Border

For Polaroid image we use only padding and border. Here right padding is 80 pixels and top, left and bottom padding is 8 pixels.  This results in :

The CSS of this image

{code type=css}

.polarid{
border: 1px solid #4C3C1B;
padding: 8px 80px 8px 8px;
width: 300px;
}

{/code}

If you want image Polaroid on top then use bottom padding  80 pixel and  top, left and right padding is 8 pixels. This results in :

The CSS of this image

{code type=css}

.polar{
border: 1px solid #4C3C1B;
padding: 8px 8px 80px 8px;
width: 300px;
}

{/code}

3. Frame Double Border

This technique is mostly used to make image galleries. The width of the two borders are the same as the border-width value, which makes frame around image like this…

The CSS of this image

{code type=css}

.frame{
border-style: double;
padding: 14px;
background-color: #d1e7f4;
}

{/code}

4. Dotted and Dashed Border Style

Here is example of Dotted and Dashed border Style. Top and left side used dotted border style while bottom and right side used dashed border style , See below.

The CSS of this image

{code type=css}

.dashdott{
border-top-style:dotted;
border-bottom-style:dashed;
border-left-style:dotted;
border-right-style:dashed;
}

{/code}

5. Frame Groove Border

Groove is a three-dimensional effect that gives the impression that the border is carved into the canvas. In this border style the effect depends on the border – color value. It is 3D grooved border.

The CSS of this image

{code type=css}

.frameone{
border-style: groove;
border-color:pink;
border-width: 25px;
}

{/code}

6. Inset Border Style

The inset value appears to make the whole box look as though it were embedded into the canvas.In this border style the effect depends on the border – color value. It is 3D inset  border.

The CSS of this image

{code type=css}

.inset{
border-style: 18px  inset  #d2e3ed
}

{/code}

7. Outset Border Style

Outset is a 3D effect that has the opposite effect of inset in that the border gives the impression that the box protrudes from the canvas. The border makes the whole box look as though it were coming out of the canvas.

The CSS of this image

{code type=css}

.outset{
border-style: 18px  outset  #d2e3ed;
}

{/code}

8. Ridge Border Style

Ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.

The CSS of this image

{code type=css}
.ridge{

border-style: ridge;
border-color: red;
border-width: 14px;
}

{/code}

9. Above and Below Border Style

To give a stylist  look  to your image you can place border above and below or, right and left. You may give border double ,dotted, solid ,ridge,inset,and outset.  For this image top and bottom border is double, padding  5 pixels, and border width 8 pixels.

The CSS of this image

{code type=css}

.abovebottom{
border-top-style:double;
border-bottom-style:double;
padding-top:5px;
padding-bottom:5px;
border-top-color:#7cbfcf;
border-bottom-color:#7cbfcf;
border-top-width:8px;
border-bottom-width:8px;
}

{/code}

10. Off  Border Style

In this i have used top border style as ridge, border width is 8pixels, see below.

The CSS of this image

{code type=css}
.off {
width: 300px;
padding: 0px 6px 6px 0px;
background-color: #9FB2C1;
border-top-width: 8px;
border-top-style:ridge;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 2px;
border-style: solid;
border-color: #082F70;
}

{/code}

11. Round Corners Border Style
There are several ways to do this example, Here is one  method for creating boxes with rounded corners through the power of CSS. A similar technique can be applied to making borders with round corners. We’ll start by inserting our four corner curves as background images  (image created by the graphic program ) through the CSS:

For above four corners the CSS is–

{code type=css}

.border{width:350px}
.bl {background: url(bottoml.jpg) 0 100% no-repeat}
.br {background: url(bottomr.jpg) 100% 100% no-repeat}
.tl {background: url(topl.jpg) 0 0 no-repeat}
.tr {background: url(topr.jpg) 100% 0 no-repeat; padding:10px}

{/code}

For second round corner in which include image the CSS is–

{code type=css}

.imbo{
width:200px;
height:200px;
padding-left:65px;
padding-top:10px;
padding-bottom:30px;
}

{/code}

Another method is —

First take

Then next step is to slice it into three images, Top, Center and Bottom.

The HTML is written as

{code type=css}
<div></div>
<div>Place Your Image Here </div>
<div></div>

{/code}
The top and bottom div classes each have to have a width and height declared in order to see the background image. Finally result become as–

The CSS of this image

{code type=css}
.roundtop {
background-image: url(rounded-top.jpg);
width: 315px;
height: 10px;
}
.roundside {
background-image: url(rounded-sides.jpg);
background-repeat: repeat-y;
width: 315px;
text-align: center;
}
.roundbottom {
background-image: url(rounded-bottom.jpg);
width: 315px;
height: 10px;
}

{/code}

12. Fun Border Style

It is supported by all browsers. When playing with border-width you can get it like this

The CSS of this image

{code type=css}

.bigdott{
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
border-width:18px;
border-color:#9FB2C1;
padding:6px;
}

{/code}

13. Patterned background border style

If you want to use images as the border background then Patterned background border style fulfills this desire. Here is background in a image form, with 15 pixels padding and border width is 2pixels . We can’t use image as image-border for all browser.

The CSS of this image

{code type=css}
.Patternd{
padding: 15px;
background-image: url(patternd.jpg);
}

{/code}

14. Double Patterned background border style

In this we use double patterned background border style. Like this–

The CSS of this image

{code type=css}
.outer{
background-image: url(back.jpg);
border: 4px solid #ccc1c9;
padding: 26px 23px;
width: 223px;
}
.Patternd
{
padding: 15px;
background-image: url(patternd.jpg);
border: 2px solid #ff009d;
}

{/code}

Apply Outer class to a div and then image tag is used.

15. Box Shadow with Radius Border Style

The  css3 property box-shadow allows to add without the use of images a shadow effect to the selected elements.
With this example you can make its own new Border Design. The css3 property box-shadow is at the moment supported by Safari 3.1+ adding the prefix -webkit., Firefox 3.5+ adding the prefix -moz.

Mozilla box-shadow defined x-axis,y-axis and z-axis. -moz-border-radius defined the corner radius border style.

The CSS of this image

{code type=css}
.myCSS3id{
border: 5px solid #111;
-moz-box-shadow: 35px 35px 7px #999999;
-moz-border-bottom-right-radius: 15px;
-moz-border-radius:25px;
padding: 15px 25px;
height: inherit;
width: 300px;
}

{/code}