Double Stitched Effect Using CSS

As usual I was going through some tutorials from our web experts. I came across something new to my readers which is not available on the net to my best of knowledge. I came across stitched effect using CSS alone. No JavaScript or any other images involved in this tutorial.

I’m going to teach you guys, how to create double stitched effect using CSS or jeans clothing stitch effect using CSS. Sounds cool?

Double Stitched Effect Using CSS

This tutorial uses webkit transitions in the CSS or you can call them as CSS3.
To get the best effect of this tutorial, I recommend you to use a webkit browser like Chrome, Firefox, Safari.

The objective of the tutorial:
Using CSS:
1. create a box container, filled the background with a color.
2. Created the first Stitch using “border” and “border-radius” attributes.
3. Second Stitch using “outline” and “outline-offset” attributes.
4. Added a shadow to the box using CSS3 attributes.
5. Final product will be made of a box with a double stitch inside.

Here is the code to create a double stitched effect using CSS:
The CSS Code:

h2 {
font-size: 40px;
line-height: 190px;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: -1px -1px 1px #000;

#boxcontainer {
background-color: #47403a;

/*First Stitch*/

border: 2px dashed #ffff9c;
border-radius: 1px;

/*Second Stitch*/
outline: 2px dashed #ffff9c;
outline-offset: -8px;

-moz-border-radius 1px;
-webkit-border-radius: 1px;
-moz-box-shadow: 0 0 0 4px #282247, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #47403a, 2px 1px 6px 4px rgba(10,10,0,.5);

To Make The Double Stitched Box To Appear:

<div id="stitchedbox">
<h2>Double Stitched Effect</h2>

How to use it in Blogger?
Place the CSS code before </head> section in the HTML template.
HTML can be placed anywhere on the blog as you desire it to appear.

Hope you will liked this double stitched effect using CSS. Enjoy decorating your website using this effect and do let us know if you have got something new using the effect. It will be real useful for our readers. Thanks for stopping by… Your comments are valued..


Previous articleHow To Add Background Scrolling Effect With jQuery For Blogger?
Next articleHow To Add Small jQuery Image Slider To Blogger?
Karan Vyas is the founder at, Completed his B.Tech in ECE. He is passionate blogger, Web Developer having vast knowledge on Reverse engineering, Programming, Search Engine Optimization. He's Certified Ethical hacker as well due to his Interest. Apart from this he has knowledge in Witchcraft Black magic and Hypnotism.