Double Borders in CSS
PayneLess Designs

Double Dotted, Dashed and Solid Borders:

CSS Used Above:

img.image_size {
width: 122px;
height: 189px;
}

ul.double_border li {
list-style-type: none;
display: inline;
}

img#dotted_borders {
border: 3px dotted #700;
display: block;
}

span#dotted {
border: 3px dotted #070;
padding: 6px;
margin-right: 3px;
float: left;
}

img#dashed_borders {
border: 3px dashed #700;
display: block;
}

span#dashed {
border: 3px dashed #070;
padding: 6px;
margin-right: 3px;
float: left;
}

img#solid_borders {
border: 3px solid #700;
display: block;
}

span#solid {
border: 3px solid #070;
padding: 6px;
float: left;
}

HTML:

<div class="left"><span id="dotted"><img class="image_size" id="dotted_borders" src="image_left.jpg" alt="" /></span></div>
<div class="ctr"><span id="dashed"><img class="image_size" id="dashed_borders" src="image_center.jpg" alt="" /></span></div>
<div class="right"><span id="solid"><img class="image_size" id="solid_borders" src="image_right.jpg" alt="" /></span></div>

Double Double, Groove and Ridge Borders:

CSS Used Above:

img.image_size {
width: 122px;
height: 189px;
}

ul.double_border li {
list-style-type: none;
display: inline;
}

img#double_borders {
border: 3px double #700;
display: block;
}

span#double {
border: 3px double #070;
padding: 6px;
margin-right: 3px;
float: left;
}

img#groove_borders {
border: 3px groove #700;
display: block;
}

span#groove {
border: 3px groove #070;
padding: 6px;
margin-right: 3px;
float: left;
}

img#ridge_borders {
border: 3px ridge #700;
display: block;
}

span#ridge {
border: 3px ridge #070;
padding: 6px;
float: left;
}

HTML:

<div class="left"><span id="double"><img class="image_size" id="double_borders" src="image_left.jpg" alt="" /></span></div>
<div class="ctr"><span id="groove"><img class="image_size" id="groove_borders" src="image_center.jpg" alt="" /></span></div>
<div class="right"><span id="ridge"><img class="image_size" id="ridge_borders" src="image_right.jpg" alt="" /></span></div>

Double Inset and Outset Borders:

CSS Used Above:

img.image_size {
width: 122px;
height: 189px;
}

ul.double_border li {
list-style-type: none;
display: inline;
}

img#inset_borders {
border: 3px inset #700;
display: block;
}

span#inset {
border: 3px inset #070;
padding: 6px;
margin-right: 3px;
float: left;
}

img#outset_borders {
border: 3px outset #700;
display: block;
}

span#outset {
border: 3px outset #070;
padding: 6px;
margin-right: 3px;
float: left;
}

HTML:

<div class="left"><span id="inset"><img class="image_size" id="inset_borders" src="image_left.jpg" alt="" /></span></div>
<div class="right"><span id="outset"><img class="image_size" id="outset_borders" src="image_right.jpg" alt="" /></span></div>

Designed for Firefox Browser and 1024x768

Site Nav Links

Off Site Links

« Links open in new window/tab »

Cool Links

« Links open in new window/tab »

Monitor Page for Changes

Double Borders in CSS
PayneLess Designs

Double Dotted, Dashed and Solid Borders:

Double Double, Groove and Ridge Borders:

Double Inset and Outset Borders:

Designed for Firefox Browser and 1024x768

Site Nav Links

Off Site Links

« Links open in new window/tab »

Cool Links

« Links open in new window/tab »

Monitor Page for Changes

Double Borders in CSSPayneLess Designs

Double Dotted, Dashed and Solid Borders:

Double Double, Groove and Ridge Borders:

Double Inset and Outset Borders:

Double Borders in CSS
PayneLess Designs