Stitched Like Design Without Using Images

A stitched layout is one of the most common technique used recently on web designing. This renders divs and containers with a stitched-like borders.

The common approach here is to use images to create these borders. Though, this approach means we need to load more items on our sites that technically affects loading speed.

To solve this, here is an approach that uses plain CSS for rendering a stiched border without using any images.

Demo

THIS IS AN ACTUAL EXAMPLE OF STITCHED DESIGN USING HTML AND CSS

CSS Code

.stitchBorder {
 padding: 10px 10px;
 margin:15px;
 background: #62CE8B;
 -moz-box-shadow: 0 0 0 10px #62CE8B;
 -webkit-box-shadow: 0 0 0 10px #62CE8B;
 box-shadow: 0 0 0 10px #62CE8B;
 border: 2px dashed #fff;
 
 color: #fff;
 font-weight: bold;
 line-height: 1.3em;
 text-align:center;
 font-weight:bold;
 font-size:30px;
}

Just simply add stitchBorder to your container's class and this will create a stitched-like border. The secret here lies on these lines:

background: #62CE8B;
 -moz-box-shadow: 0 0 0 10px #62CE8B;
 -webkit-box-shadow: 0 0 0 10px #62CE8B;
 box-shadow: 0 0 0 10px #62CE8B;
 border: 2px dashed #fff;

We did set the background to a certain color and used shadow to create a solid border. Then we add dashed borders that creates an illusion that as if it was stitched.

Baically, you can play with these lines to create your desired look for your design.

---