Here's a border-image created from a single 66-pixel-square graphic, which looks like the one accompanying the text in this paragraph. This is a relatively easy way to implement a border-image, but it does require a bit of knowledge on what values the spec expects. I've deduced that besides the URL value for the image itself, you have two other basic parts of the attribute: (1) some values for height, width, and corner sizes, and (2) a statement of how the images are rendered. In this example, I'm using the stretch rendering option, which as you can guess merely stretches the images as needed to fill the space alloted to the box--in this case, this paragraph.

The border-image style attribute for this paragraph is:

"-webkit-border-image: url('/images/brdrs2.png') 22 stretch; border: solid #E2E6CE 2em"

The first set of values took a bit of guesswork on my part, working from the example at CSS3.info. Basically, what you need to consider in designing or choosing an image is that the image needs to parse into three repeatable components: One for the corners, one for the horizontal stretch part, and one for the vertical stretch part. To break this down into a simple example so I could begin with something worth sharing, I followed CSS3.info's lead and went with a square image, with 9 equal square parts total and 3 equal square parts for the three components I needed. Each component is 22 pixels square, so the only value I need in the CSS is 22, a shorthand like saying padding: 5px if you want 5 pixels of padding on all four sides.

The final piece of the puzzle is one that took me the longest to discover: For a border-image attribute, you still need a border attribute, to control the width of your border. I don't think the border style's other attributes are needed, but you do need to specify the border width. This paragraph uses a 2em border width, whereas the next one uses 4em.

Doing drop shadows on boxes really has been one of the holy grails of web design. Designers and programmers have been devising approaches to this for years, lately coming up with some really creative ways of using JavaScript and CSS. But even the best approaches are relatively complicated to implement, and require more resources in the web browser. The CSS3 box-shadow specification will finally make doing pro-looking drop shadows on virtually any HTML element a no-brainer technique, even for CSS beginners.

Compared with border-image, applying a box-shadow to a paragraph is intuitive, working just as you'd expect it to. In its basic form, the style takes four attributes: (1) x distance, (2) y distance, (3) size of blur in pixels, and (4) the shadow color. Here's the style used for this paragraph:

"-webkit-box-shadow: 2px 2px 11px #888"

You can use negative values for x and y, to reverse the direction of the shadow, and a small blur value results in a sharper edge. It's also terrific to know that the box-shadow will follow adjust itself to the curves of the CSS3 border-radius style, which has been implemented both in Safari and Firefox now. The example below shows a box-shadow on a paragraph with a defined border-radius, as well as a regular old 1pt border.

Incidentally, this article's section titles, along with their circled numbers, are made using a combination of the CSS3 box-shadow, border-radius, and opacity styles.