I’m sure most of you might have seen a stitched border on website layouts. It’s one of those common style tricks which designers love to experiment with. But if you check the source code of such websites then you’ll find that 90% of them have used a background-image.
Now I’m not saying that using a background-image is a crime in CSS. But when you consider the impact of load time on search results and the rise of mobile internet users one needs to avoid images as far as possible.
An alternative solution to this problem could be the use of CSS sprites. Again, if you remember sprites cannot be repeated either horizontally or vertically.
So if you encounter a situation where-in you need to present a stitched border on a div that stretches across 1024px, would you still consider using a long stripe of stitched border ?
My answer would be obviously no considering that we have another beautiful & flexible alternative in the form of CSS3. Yes, today we will be seeing how we can achieve a stitched border with plain CSS3 coding (mainly box-shadow).
Before we start let me remind you that with perfect choice of border/background colors we can achieve the same stitched effect that we achieve with an image.
The HTML base
Since this border effect mainly depends on CSS we’ll keep the HTML part short and simple.
<div id="box"> <p>Put some text here..</p> </div>
CSS Code
Well the all important CSS code which includes the box-shadow property of CSS3 goes this way.
#box {
width: 30em;
height: 18em;
margin: 1em auto;
padding: 1em;
background: #356AA0;
border: 3px dashed #fcfcfc;
color: #fff;
text-shadow: -1px -1px 0 #000;
box-shadow: 0 0 0 0.75em #356AA0, 0 0 0.75em #356AA0;
-webkit-box-shadow: 0 0 0 0.75em #356AA0, 0 0 0.75em #356AA0;
-moz-box-shadow: 0 0 0 0.75em #356AA0, 0 0 0.75em #356AA0;
}
If you take a good glance at it you’ll find that I’ve used 3 variants of box-shadow.
First one is the W3C approved property, the second one if specific to browsers & renderers which run on the webkit engine & the third one is reserved for mozilla (i.e. Firefox).
We use multiple box-shadows with the same color (as our background) so that the area of our container increases without fading. You can also try with a single box shadow and the result won’t vary much.
You are free to enhance the source code to any extent as you like by adding a CSS3 border-radius and other properties. But make sure that you pick the right color combination for the border and the main box background, else it will look shite.
There is another method to achieve this effect without a background image and with pure CSS2 i.e. with the use of two boxes. First one (outer container) to cover the inner and then the inner one to hold the dashed border.
But we are not going to see that method in this tutorial as it basically increases our code & does abuse the use of the division container.
So after knowing this trick are you still going to use background images or move on with the latest CSS3 techniques ?