A little dab'll do ya
Code Snippets
.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
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.
Looks great! I think it looks even better with this added. :-)
border-bottom-left-radius: 3px 3px;
it is really good one