Code Snippet

Home » Code Snippets » CSS » “Stitched” Look

“Stitched” Look

.stitched {
   padding: 5px 10px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   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 #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

Reference URL

Subscribe to The Thread

  1. mrvn

    looks pretty awesome!!

    Reply ↓
  2. Philip Dahl

    This is a great trick!

    Reply ↓
  3. GNO

    The “key” to this look is just the line “border: 2px dashed #fff;” in case anyone wondered what were going on up there…

    Reply ↓
    • Dor

      Well sure, but how did the border get INSIDE the element, or how did the background get out of it?

      I don’t see any background-origin here…

    • GNO

      That’s the box-shadow.

  4. Randy

    Looks great! I think it looks even better with this added. :-)

    border-bottom-left-radius: 3px 3px;

    Reply ↓
  5. Ahmad Awais

    it is really good one

    Reply ↓
  6. Ahmad Awais

    Great snippet

    Reply ↓
  7. charan

    but it is not working in ie 7 and 8,

    any solution please?

    Reply ↓
  8. John

    Thanks for information guys

    Reply ↓
  9. Ondra

    Looks great! Thank you

    Reply ↓
  10. jamie

    i wish these posts had visual examples :/

    Reply ↓
  11. askokan

    border:

    Reply ↓
  12. Louis

    If your element is not using rounded corners, and you don’t care about IE6/7 support, then you could do this using a dashed border and the outline property, instead of a box shadow. Syntax-wise it’s a little simpler, but roughly the same effect.

    But if you use rounded corners, then you can’t use outline because it will look weird. ;)

    Reply ↓
  13. Jake

    For browser compatibility, you can turn that long code into this

    .stitched{
    border:2px dashed #fff;
    background: #ff0030;
    box-shadow: 0 0 0 8px #ff0030;
    }

    That’s the main key, for some style…it’s all up to you..

    Reply ↓
  14. Wayne Gomez

    webkit doesnt work in explorer…ban IE…hehehe

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~