CSS3 Border-Image Testing Zone

So, here's a nice little border from Clkr.com, which is usually my first stop when hunting for a handy free & legal graphic.

Of course, by using background-images, I can PRETEND it's a border...

<p style="background: url(http://www.istad.org/lenses/border-image-css3/green-border.png); width: 520px; height: 290px; padding: 30px;">

In this case, I'm not applying the image to the BORDER only. I'm applying the image to the whole paragraph. This is a little tricky, as I have to get the padding + width to equal the dimensions of the image, or the image could be chopped off at the edges of the paragraph. Also, different browsers/computers may show text at slightly different sizes, spilling over the border. This can be fixed by defining font-size and line-height in pixels, to make sure text is proportional to the background.

Border-image lets you apply an image JUST to the border, which stretches and scales to fit the shape of the border.

<p style="-moz-border-image:url(http://www.istad.org/lenses/border-image-css3/green-border.png) 10% stretch; -webkit-border-image:url(http://www.istad.org/lenses/border-image-css3/green-border.png) 10% stretch; border: 40px green; padding:10px;">

This time, instead of applying the image to the entire paragraph, I told it to apply it to the border alone... and then stretch it to fit. I had to tell it twice: once for Firefox/Mozilla, once for Safari/Chrome. As usual, Internet Explorer is going to sit in the corner and suck its thumb; it doesn't understand border-image and will simply make a green box (border: 40px solid green).

I know how IE feels. I have used this understanding border-image tutorial to make my first border-image, but I am confused.

stretch says to stretch it, in which case it stretches or shrinks the border like a rubber band to fit your text. Instead of stretch, you can use repeat, in which case it leaves the corners where they are, then repeats the middle sections of each edge as many times as needed to fit the paragraph.

What I don't understand is the % part of the border-image command. It's telling it what chunk of the middle section to repeat. You can specify it in pixels or in percentage. Buut... there's this slicing stuff, and...uh....on the whole, you'd probably do better to use an image like the example below, which isn't going to look weird if you stretch it.

The web works because everybody has agreed to use the same set of commands to describe the same things.

For example: you want to make bold? Then use <b> for bold. Or, wait, don't, because we want to use HTML (the tags enclosed with < and >) to indicate THINGS on the page, like headlines, links, images, and CSS (the properties indicated by style="blah blah" inside a tag) to indicate how they LOOK.

Or at least, thats the theory. But who decided the commands? A nonprofit thinktank, the W3 Consortium, which has been hashing out the web standards... a common language for all web browsers and programmers...since the web began.

Problem: they can propose standards, but then it's up to web browsers and programmers to USE them! Internet Explorer didn't figure out how to implement border-radius, the command for rounded corners, until last year with IE9. Firefox has its own way of doing them; right now it's looking for -moz-border-radius, and won't catch up until Firefox 4 is released. Bottom line:

Once the W3 Consortium proposes a new set of nifty CSS commands, it takes YEARS for all the web browsers to catch up, and longer for web users to upgrade their browsers so the codes work.

For this reason, we sometimes have to weigh whether it's worth using a visual effect that not all our visitors will be able to see.

(Frame drawn by playing with layer effects in photoshop.)

This whole lens started with the question in SquidU: How can I take a small graphic and repeat it for a border?

I think there's an easy way to do this with border-image, but I'm confused. Even if I could get it to work, IE won't understand it.

So instead, as Geeve says, we can use apply the image to an outer box-shaped area -- a paragraph -- and put another box inside it with a white background.

Let's demonstrate with an example.

Here's one of the most disturbing graphics I have ever drawn. His name is yo-yo.

Now, I can make yo-yo the background image for a paragraph easily enough:

Blah blah blah blah

Code for above example:
<p style="background:url(http://www.istad.org/mc/yoyo.gif); padding: 40px;">Blah blah blah blah</p>

So then we need to put a white box inside that box. Normally, I'd use divs, but Squidoo doesn't give us the keys to div, lest we scramble the whole page layout. Luckily, we can force a span tag to behave like a paragraph (a box-shaped area) by doing this:

<span style="display: block;">A span tag is normally used to apply color, size, font-changes, or other "make-up" to text, but it doesn't come with any sense of a fixed area on the page. Defining it as a BLOCK converts it into a paragraph, that is, a rectangular area with a carriage return before and after.</span>

That means we can use a span as the inner of our two nested boxes:

CODE TO MAKE THIS WORK:
<p style="background:url(http://www.istad.org/mc/yoyo.gif); padding: 28px;"><span style="display: block; padding: 14px; background-color: #fff; font-size: 14px; line-height: 28px;">Blah blah blah blah</span></p>

Note1: the PADDING for the outer container (the paragraph) must be the width/height of the graphic. If the height and width are different, use two numbers, for example:
padding: 20px 30px;
for width, then height.

Note2: I also had to specify padding, font-size and line-height in pixels, using multiples of the graphic's height. (Half its height also worked: note the font-size of 14px). When I didn't, the bottom row of graphics wound up with a "remainder," chopping off the bottom of those graphics.

Note3: If you only want the graphic to repeat horizontally, change the background as follows:
background:url(http://www.istad.org/mc/yoyo.gif) repeat: repeat-x;

or change to repeat-y to have it only repeat vertically (along the sides).