display: table-cell;
vertical-align: middle;
background: #666 center
url(border-image/colorbars.png);
-webkit-background-size: 105%;
background-size: 105%;
min-width: 194px;
height: 157px;
color: white;
padding: 20px;
border: 9px solid black;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
-moz-border-radius: 35px / 24px;
-webkit-border-radius: 35px 24px;
border-radius: 35px / 24px;
This much creates something that is roughly the shape of an old TV tube, even when the border-image property (or images) is not supported. The tube shape and size will be replicated within the border-image.
2009
Firefox does not yet handle "background-size", so the color bars don't stretch across the width in the same way that they were intended. It just tiles it instead, which in this case is OK as a fallback.
-moz-border-image:
url(border-image/tv.png)
19 74 68 30 / 19px 74px 68px 30px;
-webkit-border-image:
url(border-image/tv.png)
19 74 68 30 / 19px 74px 68px 30px;
border-image:
url(border-image/tv.png)
19 74 68 30 / 19px 74px 68px 30px;
Adding the border image, for those UAs that know what to do with it. Note that the color bars now extend out too far (to the new border demensions we gave after the slash in border-image), so it will absolutely be neccesary to limit that background to the inside of the old border, using "background-clip: padding-box"
2009
WebKit clips the corners based on the border-radius of the now-hidden stroked border. It shouldn't do that. The border-image has its own clipping within the PNG images, and border-radius should no longer be relevant to the border.
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
2009
Notice in WebKit that the corner radius is still cutting through the corners of the border-image, even though it is only the padding-box that should be getting clipped. That is not at all desirable, and the only way to get rid of it is to remove the border radius (even from UAs that support it but don't support border-image), or clarify in the spec that this should not happen (or at least not when "background-clip: padding-box" is specified, as this would never be what the author desired in that situation).
Now for fun, use photoshop to add a drop shadow to the TV PNGs, and use box-shadow for the UAs that don't support border-image.
-moz-border-image:
url(border-image/tv-shadow.png)
19 74 68 30 / 19px 74px 68px 30px;
-webkit-border-image:
url(border-image/tv-shadow.png)
19 74 68 30 / 19px 74px 68px 30px;
border-image:
url(border-image/tv-shadow.png)
19 74 68 30 / 19px 74px 68px 30px;
Whoops! WebKit and Firefox put in the shadow for the border we DON'T otherwise see. They shouldn't do that. The only value of box-shadow in this case is as a fallback, since any shadow I want can be included in the PNG images of the border-image. And with the original stroked path invisible, and the background clipped to the padding box, the position of the shadow is also very odd.
2009
WebKit fills in the shadow according to where the originaly stroked path was.
Firefox only shows the part that sticks out from where the original stroked border was.