“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!


  1. mrvn
    Permalink to comment#

    looks pretty awesome!!

  2. Philip Dahl
    Permalink to comment#

    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.

    • Boxon
      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. Ahmad Awais
    Permalink to comment#

    it is really good one

  6. Ahmad Awais
    Permalink to comment#

    Great snippet

  7. charan
    Permalink to comment#

    but it is not working in ie 7 and 8,

    any solution please?

  8. John
    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#


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

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

    So nice~thank you

  16. A Bit Annoying
    Permalink to comment#
  17. Nancie
    Permalink to comment#


    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! :)


  18. TechView
    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:


  20. Boxon
    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. marie
    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#

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

    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. R G
    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. Designsolv

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

  31. Vipin
    Permalink to comment#

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

  32. Zartash
    Permalink to comment#

    simple but cool effects. Designs is all about thoughts. What you think can convert it into your thoughts.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.