Add a Stitched Look with CSS


CSS can do some neat things to jazz up web pages. One nifty trick is to make a stitched look on the page for western themes or for coupons or whatever your imagination can muster. Below is the CSS code needed to make the stitching.

Just copy and paste the code into your CSS selector for the area you want a stitched look on. You may need to adjust some of the settings to get the exact look for your particular website.

Change the color and the width of the border for the most dramatic changes. The “key” to this look is the line “border: 2px dashed #fff;” change this and you change the type of dotted line it is. Play around with it and see what you can come up with.

Copy & paste this into CSS:


.stitches {

padding: 20px;

margin: 10px;

background: #ff0030;

color: #fff;

font-size: 21px;

font-weight: bold;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 10px;

box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

text-shadow: -1px -1px #aa3030;

font-weight: normal;



Have a unique CSS code to share or questions about how to use this code?

Sound off in the comments below!

Written by: Skypoint

SkyPoint Studios has written 47 posts in the Tech Blog.

SkyPoint Studios is a full-service web & graphic design firm located in Billings Montana We have a passion for hyper-localized service, we know Billings and Montana and care about doing business in our local community.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.