“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. User Avatar
    mrvn
    Permalink to comment#

    looks pretty awesome!!

  2. User Avatar
    Philip Dahl
    Permalink to comment#

    This is a great trick!

  3. User Avatar
    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…

    • User Avatar
      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…

    • User Avatar
      GNO
      Permalink to comment#

      That’s the box-shadow.

    • User Avatar
      Boxon
      Permalink to comment#

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

    • User Avatar
      Heloisa
      Permalink to comment#

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

    • User Avatar
      Damodar Bashyal
      Permalink to comment#

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

  4. User Avatar
    Randy
    Permalink to comment#

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

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

  5. User Avatar
    Ahmad Awais
    Permalink to comment#

    it is really good one

  6. User Avatar
    Ahmad Awais
    Permalink to comment#

    Great snippet

  7. User Avatar
    charan
    Permalink to comment#

    but it is not working in ie 7 and 8,

    any solution please?

  8. User Avatar
    John
    Permalink to comment#

    Thanks for information guys

  9. User Avatar
    Ondra
    Permalink to comment#

    Looks great! Thank you

  10. User Avatar
    jamie
    Permalink to comment#

    i wish these posts had visual examples :/

  11. User Avatar
    askokan
    Permalink to comment#

    border:

  12. User Avatar
    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. User Avatar
    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. User Avatar
    Wayne Gomez
    Permalink to comment#

    webkit doesnt work in explorer…ban IE…hehehe

  15. User Avatar
    Anntina
    Permalink to comment#

    So nice~thank you

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

    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Andoro

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

    • User Avatar
      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. User Avatar
    Designsolv

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

  31. User Avatar
    Vipin
    Permalink to comment#

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

  32. User Avatar
    Zartash
    Permalink to comment#

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

  33. User Avatar
    vishino
    Permalink to comment#

    why font-weight is doubled? normal and bold?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag