Grow your CSS skills. Land your dream job.

Last updated on:

“Stitched” Look

.stitched {
   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;
}
Check out this Pen!

Comments

  1. mrvn
    Permalink to comment#

    looks pretty awesome!!

  2. This is a great trick!

  3. GNO
    Permalink to comment#

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

    • Dor
      Permalink to comment#

      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
      Permalink to comment#

      That’s the box-shadow.

    • Permalink to comment#

      Simplest way is to use outline with outline-offset. That way you can use border for something usefull

    • Heloisa
      Permalink to comment#

      @Boxon Outline has no border-radius, that’s why the box-shadow.

    • Damodar Bashyal
      Permalink to comment#

      awesome! I was thinking there is some other real trick lol.

  4. Randy
    Permalink to comment#

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

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

  5. it is really good one

  6. Great snippet

  7. charan
    Permalink to comment#

    but it is not working in ie 7 and 8,

    any solution please?

  8. Permalink to comment#

    Thanks for information guys

  9. Ondra
    Permalink to comment#

    Looks great! Thank you

  10. jamie
    Permalink to comment#

    i wish these posts had visual examples :/

  11. askokan
    Permalink to comment#

    border:

  12. Permalink to comment#

    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. ;)

  13. Jake
    Permalink to comment#

    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..

  14. Wayne Gomez
    Permalink to comment#

    webkit doesnt work in explorer…ban IE…hehehe

  15. So nice~thank you

  16. A Bit Annoying
    Permalink to comment#
  17. Hi,

    I would appreciate if there were previews for these snippets. For a beginner like me, it is hard to understand what some of the terms mean or would look like. Great site though and has been very helpful! :)

    Nancie

  18. Permalink to comment#

    @Chris Coyier; Sorry YouTube currently banned in our country due to recent religious outrage.

    @Jacques; dabblet.com is really awesome. Result could be observed instantly.
    thanks for sharing.

  19. Justin O'Neill
    Permalink to comment#

    Is their a way to make the dashes spaced out more or make longer?

    Instead of this:

    Do this:
    –   –   –   –   –   –   –   –   –   –   –   –   –   –

    Or this:
                                        _

    Thanks!

  20. Permalink to comment#

    This really looks good. I used this same inspiration on my site, like a year ago, with only one difference – I used outline property, instead of border. Good side of that is that border can be used for additional stuff, bad side is that border can have sides, like top or left, but outline goes all the way around symmetrically.
    Main problem with this effect, using borders or outlines, is further behavior – like, trying to use fluid-width-equal-height-columns, on any method except JavaScript, with box-sizing: border-box; property.
    Other methods are making this trick complicated:
    When stretched down to infinity, border(and outline) bottom part moves all the way, leaving inconsistency in design, so ugly “patch div” has to be applied, to keep appearance of border-bottom, and that is not really a nicest example of code.

  21. Permalink to comment#

    Really looks great. I used to create it using a dashed line border in CSS but this one is more elaborate. Thanks a lot!

  22. Hamid
    Permalink to comment#

    hello,
    the tutorial was great. just one thing …
    how to create shadows for the dashed line …
    i’v tried everything but i can’t get the dashed line to have shadows.
    thanks in advanced …

  23. Thomas Henley
    Permalink to comment#

    Great tip, I did this recently for an eCommerce site, stitched the price tag, however I ended up using two HTML elements, one for the background colour which had the padding, then the inner element had the dashed border, this is a much more elegant solution. Thanks

  24. ankaj
    Permalink to comment#

    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;
    this not work in CSS2.1 .
    How it is work?

  25. You cannot use this if you use percentages in the body.


    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    So no round stitched icons, interested to see if anyone has any solutions. I also filed a bug report with Mozilla on this one.

  26. Matt Frazee
    Permalink to comment#

    I’m surprised no one mentioned the dreaded firefox border radius rendering issue. I would love to use this if it wasn’t for that.

  27. Permalink to comment#

    I was wondering how the border came inside the red box..but manage to figure it out with box shadow used… Thanks a lot …

  28. Sasha

    How about old browsers? How to make sure that border-radius will work at old browsers. Some people still have old browsers. Web designers have to make cross browsers sites.

  29. Andoro

    Is there any solution for the dashed corner rendering bug in FF? It looks solid, very strange :-/

    • Matt

      I would recommend reverting to images or using a mixture of JS and images to apply a dashed border on the corners of your button element, not pretty, but functional. Another option might be to try resizable SVG buttons for the modern browsers.

      Anyone have any better suggestions?

  30. This is a much more effective & efficient solution than using two HTML elements to get this job done…

  31. Permalink to comment#

    I was wondering how border got inside the box,
    now understood the trick.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".