.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!
looks pretty awesome!!
This is a great trick!
The “key” to this look is just the line “border: 2px dashed #fff;” in case anyone wondered what were going on up there…
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…
That’s the box-shadow.
Simplest way is to use outline with outline-offset. That way you can use border for something usefull
@Boxon Outline has no border-radius, that’s why the box-shadow.
awesome! I was thinking there is some other real trick lol.
This is not working on Firefox or Chrome. I’ve used the same code. Any help would be appreciated!
Looks great! I think it looks even better with this added. :-)
border-bottom-left-radius: 3px 3px;
it is really good one
Great snippet
but it is not working in ie 7 and 8,
any solution please?
IE7 and IE8 don’t support CSS3, which this uses.
Use CSS3 PIE: http://css3pie.com/
Thanks for information guys
Looks great! Thank you
I would have used a much simpler example to demonstrate the stitched look
The trick to get the background color to bleed over the border is the spreadradius of box-shadow (the 4rth element, which here I set to 8px)
But not all versions of BRW work with this :)
i wish these posts had visual examples :/
Try it out as a visual example.
border:
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. ;)
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..
webkit doesnt work in explorer…ban IE…hehehe
So nice~thank you
http://codepen.io/A-Bit-Annoying/pen/1/1 – Demo
http://codepen.io/A-Bit-Annoying/pen/1/2 – Updated version
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
Check out this tool for grabbing code and playing with it (live preview) immediately: http://blog.codepen.io/2012/07/04/introducing-the-codepen-bookmarklet/
Codepen.com is very useful indeed (as per ‘A Bit Annoying’s code, posted earlier). A similar site is: http://dabblet.com/
Also, underneath the code, there is a ‘Reference URL’ which leads to the original article. But I agree, some intro and/or screenshot would make it easier (yet more work…).
@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.
Is their a way to make the dashes spaced out more or make longer?
Instead of this:
Do this:
– – – – – – – – – – – – – –
Or this:
_
Thanks!
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.
Really looks great. I used to create it using a dashed line border in CSS but this one is more elaborate. Thanks a lot!
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 …
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
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?
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.
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.
I was wondering how the border came inside the red box..but manage to figure it out with box shadow used… Thanks a lot …
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.
Is there any solution for the dashed corner rendering bug in FF? It looks solid, very strange :-/
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?
This is a much more effective & efficient solution than using two HTML elements to get this job done…
I was wondering how border got inside the box,
now understood the trick.
simple but cool effects. Designs is all about thoughts. What you think can convert it into your thoughts.
why font-weight is doubled? normal and bold?