Published by BlueBoden on 1. november 2007. - (Updated: 11. July 2008.)
Note. There now is an article called CSS Sprites which may be relevant to this Technique. I also updated the Example page today, included some borders, and moved it to brugbart.com. This is the Old version of the BorderTechnique, if you would like to see the updated version, you should check BlueBoden's BorderTechnique With background-Images
This technique can be used to create Rounded Corners, by applying background-images to the division elements instead of background-colors. It is one of the best methods to make a scalable box with custom borders.
As always i don't claim any credits, and you may use it as you find fit in your own layouts, without linking back. Simply scroll down to the SourceCode on the bottom of the page, and copy what you need, obviously you would want to leave out the meta-tags and this text. As well as create your own styles, matching colors and so on. ;-)
This is one of the best ways to create graphically appealing borders. Simply use a background-image, instead of a solid color. Also, if you are really into graphics, you should take advantage of alpha transparency in png images.
The Technique used in this example, works by positioning division elements, inside a positioned parant block. In this case a containing div. The parant either need its position set to relative, or absolute for this to work.
By doing this, we enable ourself to set the height of the left and right borders to 100%, this makes them expand with the content as needed.
Tested and found to work in the following browsers.
Keep in mind that its the Browsers job to support the standards, and not yours to support the browsers.
Published by BlueBoden on 9. november 2007.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>BlueBoden's BorderTechnique</title>
<style type="text/css">
body {
color: #0d5288;
background-color: #72c1ca;
margin: 1em 0 10em 0;
}
.CenterContentBox {
margin: 3em auto;
width: 60em;
}
.SarCenterContent {
position: relative;
width: 100%;
margin: 0 auto;
text-align: left;
}
.sar_01 {
position: relative;
width: 100%;
height: 9px;
background-color: gray;
}
.sar_02 {
position: absolute;
left: -11px;
width: 11px;
height: 9px;
background-color: silver;
overflow: hidden;
}
.sar_03 {
position: absolute;
right: -11px;
width: 11px;
height: 9px;
background-color: gold;
overflow: hidden;
}
.sar_04 {
position: absolute;
left: -11px;
width: 11px;
height: 100%;
background-color: purple;
}
.sar_05 {
position: absolute;
right: -11px;
width: 11px;
height: 100%;
background-color: blue;
}
.sar_06 {
position: relative;
width: 100%;
height: 9px;
background-color: green;
}
.sar_07 {
position: absolute;
left: -11px;
width: 11px;
height: 9px;
background-color: yellow;
overflow: hidden;
}
.sar_08 {
position: absolute;
right: -11px;
width: 11px;
height: 9px;
background-color: brown;
overflow: hidden;
}
p {
margin: 1em 1em 0 1em;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 1em 0 0 0;
}
h2 {
font-weight: bold;
font-size: 1.5em;
margin: 1em 0 0 0;
}
.indent {
margin: 0 1em 0 2em;
font-size: 0.9em;
font-style: italic;
}
</style>
</head>
<body>
<div class="CenterContentBox">
<div class="sar_06">
<div class="sar_07"></div>
<div class="sar_08"></div>
</div>
<div class="SarCenterContent">
<div class="sar_04"></div>
<div class="sar_05"></div>
<!-- ContentGoesHere Start -->
<h1>Headline 1</h1>
<p class="indent">Description Paragraph</p>
<p>Paragraph</p>
<h2>Headline 2</h2>
<p class="indent">Description Paragraph</p>
<p>Paragraph</p>
<!-- ContentGoesHere End -->
</div>
<div class="sar_01">
<div class="sar_02"></div>
<div class="sar_03"></div>
</div>
</div>
</body>
</html>