How to create “Stitched” look using CSS3

Ever wanted to create a Stitched look using CSS only without using any graphic tools? Here’s a little snippet of code that lets you achieve exactly that.

Example to Create “Stitched” look using CSS3

Here is what we are going to create:

<style type="text/css">
.stitched_bg {
background-color: #356A00;
padding: 5px;
width: 145px;
height: 145px;
margin-left: auto;
margin-right: auto;
}
.stitched {
border:2px dashed #ffffff;
box-shadow: 0 0 0 8px #356A00;
color: #FFF;
height: 140px;
}
</style>
<div class="stitched_bg">
<div class="stitched"></div>
</div>

That’s it! Isn’t that simple?

Your turn!

Do you know of any other ways to create stitched effecting using only CSS? If yes, please feel free to share with us by commenting below.