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 BorderFor 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 BorderThis 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 StyleHere 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 BorderGroove 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 StyleThe
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 StyleOutset 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 StyleR
idge 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 StyleTo 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 StyleIn 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 StyleThere 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–Place Your Image Here
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 StyleIt 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 styleIf 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 styleIn 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;
}
We would love to hear from you...