I've been reading a lot about CSS3 lately, where it's going and all the cool stuff I can't wait for browsers to implement. My personal favorite at the moment is the ability to easily use graphics for borders. Say I want to go crazy with my borders and create something like this:
This is my spiffy box with any graphic border I want.
To give you an idea of how we'd have to do that in CSS 2 world you would need eight individual images, and a big honkin' code block like this.
xhtml
<div id="mycontent">
<div class="tb"></div>
<div class="bb"></div>
<div class="lb"></div>
<div class="rb"></div>
<div class="trc"></div>
<div class="tlc"></div>
<div class="brc"></div>
<div class="blc"></div>
<p>This is my spiffy box with any graphic border I want.</p>
</div>
CSS2
#mycontent {
margin-left: 10px;
position: relative;
width: 200px;
height: 140px;
padding: 10px;
float: left;
}
#mycontent .tb, #mycontent .bb {
position: absolute;
height: 10px;
width: 200px;
}
#mycontent .lb, #mycontent .rb {
position: absolute;
height: 140px;
width: 10px;
}
#mycontent .tb {
background-image:url('images/top.png');
top: 0;
left: 10px;
}
#mycontent .lb {
background-image:url('images/left.png');
top: 10px;
left: 0;
}
#mycontent .bb {
background-image:url('images/right.png');
left: 10px;
bottom: 0;
}
#mycontent .rb {
background-image:url('images/bottom.png');
top: 10px;
right: 0;
}
#mycontent .trc, #mycontent .tlc, #mycontent .brc, #mycontent .blc {
position: absolute;
height: 10px;
width: 10px;
background-repeat: no-repeat;
}
#mycontent .trc {
background-image:url('images/topright.png');
right: 0;
top: 0;
}
#mycontent .tlc {
background-image:url('images/topleft.png');
left: 0;
top: 0;
}
#mycontent .brc {
background-image:url('images/bottomright.png');
right: 0;
bottom: 0;
}
#mycontent .blc {
background-image:url('images/bottomleft.png');
left: 0;
bottom: 0;
}
#mycontent p {
margin: 10px;
}Whew, that was an exhausting amount of typing, especially if you hunt and peck.
Additionally, problems with the above method abound. For one it's limited to fixed pixel sizes. So if your content starts pushing the height limits of its box it's not the easiest to fix.
Here's how it's improved in CSS3. Less code and only one image is needed.
xhtml
<div id="mycontentcss3">
<p>This is my spiffy box with any graphic border I want.</p>
<p>Only its CSS3 improved</p>
</div>
CSS3
#mycontentcss3 {
margin-left: 10px;
float: left;
width: 180px;
height: 120px;
padding: 10px;
border-width: 10px;
border-image: url("images/polyborders.png") 10 10 10 10 repeat;
}
#mycontentcss3 p {
margin: 0;
margin-bottom: 10px;
}Fingers are much less tired in the CSS 3 version.
If your browser has support for border-image the results below will match the top example. Otherwise you'll see a double blue border:
This is my spiffy box with any graphic border I want.
Only its CSS3 improved
The new CSS3 attribute border-image is where all the magic happens. To break down the anatomy of a border-image property it's as follows:
- url to the image you want to use for the border
- pixels to use from top of image for top border
- pixels to use from right of image for right border
- pixels to use from bottom of image for bottom border
- pixels to use from left of image for left border
- stretch, repeat or round
At first I was confused by the above too but it actually turns out to be really simple. Basically you create an image that looks like a mini version of your border box. My image was:
Then you specify in the 2-5 options above how many pixels you need from each edge to form your borders. It automatically does the intersections of the numbers to grab the correct corners. Then you tell it how it should render the border.
- Stretch will take a single border edge and stretch its height or width to match the pixel dimensions you need.
- Repeat will repeat the graphic over and over to fill the area.
- Round will do almost the same as repeat only it will stretch the border segments individually so that you don’t have any one border graphic split in the middle.
Additionally, unlike the CSS2 border method this has no problem easily resizing and growing based on the content inside the bordered box.
As of July 2008, Safari and other webkit-based apps are the only browsers supporting it and you have to use the -webkit- prefix to get it. But fingers crossed we'll see other browsers hopping on board and be able to add this to our developer toolbelt.
Cheers.
Alex
Program Manager, Microsoft Expression Web
