I know this has been done before lots of times, but this is a quick and easy effect done in CSS, which can help spice up your designs. Although I can’t think of a reason to use it myself in the ‘metro’ and Flat-UI trends of today, but just in case you want to give your DIVs a retro makeover, this is the tutorial for you.

HTML

There’s very minimal HTML for this tutorial. All we need is a DIV, with the class stitch. You can put whatever text, inputs, images or anything you like inside the DIV.


Web, Tech & Gadgetry

CSS

Because it is a relatively simple design, there is little CSS needed. Of course, you can customise most of the options, such as the background colour, font styles and more. Also, it’s worth noting that in the featured image of this post and in the downloadable version of this tutorial, a little extra CSS is used to give the paper-styled background image.

.stitch {
  width: auto;
  display: inline-block;
  background-color: white;
  padding: 25px;
  margin: 10px;
  color: #CCC;
  font-size: 21px;
  border: 2px dashed rgba(204,204,204,0.5);
  border-radius: 10px;
  box-shadow: 0px 0px 0px 6px white;
  font-weight: normal;
}

stich

And that’s it! As I mentioned earlier, it’s a very simple but effective technique. If you wanted to be more adventurous, you could make this effect look much more realistic and ‘retro’, but if you want it to look minimal and keep things simple, this is the best option for you. Enjoy!

You can download this completed tutorial from Dropbox.