15 Fabulous CSS Border Styles

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.
This post has been borrowed from http://nisha.in/a-guide-to-css-border-style.
View original post here.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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–

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

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

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

Another method is –
First take

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

The HTML is written as

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

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

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

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

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

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

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

The CSS of this image

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

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

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