Эффект швейной строчки CSS3

by Andrey Dobrovoi

HTML

<div class="stitched-effect">Эффект швейной строчки CSS3</div>

CSS

.stitched-effect {
   padding: 5px 10px;
   margin: 10px;
   background: white;
   color: #333;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed lightgray;
   border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px white, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: 1px 1px 2px #9B9B9B;
   font-weight: normal;
   width: 300px;
   height: 300px;
}