Introduction

In this article, we will learn how to provide a Stitched effect using CSS. First, we apply the Stitched effect to a simple box (in other words any div), then we add some background-images and take this trick to the next level.
Let's Begin
Example 1
HTML Structure
<div class="stitched">Stitched</div>
CSS
  1. .stitched
  2. {
  3. background-color:darkred;
  4. width:200px;
  5. font-size:20px;
  6. color:white;
  7. padding:20px;
  8. }
Here we set the background-color, width, font-size and so on of the div using the ".stitched" class.
Preview
div using stitched class
  1. .stitched
  2. {
  3. background-color:darkred;
  4. width:200px;
  5. font-size:20px;
  6. color:white;
  7. padding:20px;
  8. border:2px dashed white;
  9. border-radius:20px;
  10. box-shadow:0px 0px 4px 4px darkred;
  11. }
We have now added a border, border-radius and box-shadow to the ".stitched" class. In the box shadow, we only use blur and spread and set the value to "4px" (box-shadow syntax: box-shadow: h-shadow v-shadow blur spread color).
Preview
added border and border-radius and box-shadow to .stitched class
That example was a basic example of a stitched effect. Now we will create another Stitched effect.
Example 2
HTML Structure
  1. <div class="pic">
  2. <div class="borderdiv">
  3. <div class="inner"><p class="text1">Stitched</p></div>
  4. </div>
  5. </div>
Here, the outermost div (".pic") sets the background-image and middle (".borderdiv") to set the border and give a stitched look and innermost div (".inner") for the text and so on.
CSS
  1. .pic
  2. {
  3. background-image:url("white_leather.png");
  4. width:302px;
  5. height:202px;
  6. border-radius:5px;
  7. }
Here, I set the background-image, width, height and border-radius.
Preview
background-image
  1. .borderdiv
  2. {
  3. width:280px;
  4. height:180px;
  5. border: 2px dashed #aaa;
  6. border-radius:10px;
  7. position:relative;
  8. top:9px;
  9. left:10px;
  10. box-shadow: 0 0 0 1px #f5f5f5;
  11. }
Here, we set the width and height less than the ".pic" so that it remains inside it. Then, we set the border, border-radius and box-shadow to provide the Stitched effect. Using position, we adjust the position to inside the div (".pic").
Preview
position inside the div
  1. .text1
  2. {
  3. margin-top:60px;
  4. text-align:center;
  5. font-size:50px;
  6. color:gray;
  7. }
Here we adjust the font-size, color, align and so on.
Preview (Final)
adjust-Font-size-color-align
I have created some other examples using the same technique. You can download them for viewing or using.
Preview
Stitched effect