Fancy border Divider - html

Question

I am trying to create the following (notice the 1 pixel gap at either end):

Answer 1

If you try:
<hr class="fancy">
with the following CSS:
hr.fancy {
border: 1px solid black;
border-width: 1px 0px;
color: black;
height: 5px;
position: relative;
}
hr.fancy:after {
content: '\A';
position: absolute;
bottom: -1px;
right: 0px;
display: block;
width: 1px;
height: 7px;
border-left: 1px solid white;
}
hr.fancy:before {
content: '\A';
position: absolute;
bottom: -1px;
left: 0px;
display: block;
width: 1px;
height: 7px;
border-right: 1px solid white;
}
Take a look at: http://jsfiddle.net/audetwebdesign/P7umD/
You can play with the pixel widths to get a bolder look.
Browser Compatibility
I checked this in Firefox and Chrome and the mark-up renders consistently.
However, does not work in IE9, you only get the double lines and not the book-ends.

Answer 2

Maybe border-image will do the trick
http://www.w3schools.com/cssref/css3_pr_border-image.asp
http://css-tricks.com/understanding-border-image/
Or you can use a div based solution
<div class="border">
Content
<div class="left"></div>
<div class="right"></div>
</div>
.border {
border-width:0px;
border-style: double;
border-color: grey;
border-bottom-width: 3px;
position: relative;
}
.left,
.right{
position: absolute;
width: 1px;
height: 3px;
bottom: -3px;
background-color: white;
}
.left {
left: 1px;
}
.right {
right: 1px;
}
http://jsfiddle.net/zCEKp/

Answer 3

This css-only solution may work for you:
html markup:
<div class="fancydivider">
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
</div>
css:
.fancydivider {
clear: both;
}
.fancydivider .left {
border-bottom: double black;
width: 1px;
float: left;
}
.fancydivider .middle {
border-bottom: double black;
width: 50px;
float: left;
margin: 0 1px 0 1px;
}
.fancydivider .right {
border-bottom: double black;
width: 1px;
float: left;
}
result:
http://jsfiddle.net/KNqR8/
http://jsfiddle.net/Lucidus/ZjGpS/1/
[edit: wrong css in first link - I don't know what happened ;-)]

Answer 4

Is this what you want?
HTML:
<div class="box">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
CSS:
.box{
position:relative;
border:3px double;
width:100px;
height:50px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
position:absolute;
width:4px;
height:4px;
border-left:1px #fff solid;
border-right:1px #fff solid;
}
.top-left, .top-right{
top:-4px;
}
.top-left, .bottom-left{
left:-4px;
}
.top-right, .bottom-right{
right:-4px;
}
.bottom-left, .bottom-right {
bottom:-4px;
}
Here's jsFiddle example.