Ok so this gonna be a real quick tip for you stressed out people who rather think about vacation right now.
Let’s say you get this design given to you with a lot of boxes in different sizes. At a first glance it looks pretty simple. Then you notice it. The borders on the boxes are freaking gradients. Damn. Because you are lazy you call the designer who made this crap for you and tell him that this is too much work.

Or wait… there’s a solution for this. And no, the solution is not to make one hundred gradient-box-images of different sizes. It’s not even to slice up the box in pieces and put it together using the CSS background-image property.
This is how to do it.

1. Create border-image

Create a small gradient image in you fav image program. (Like Photoshop). Image should be the size of your border times three. In my example 2×3 = 6px. I.e. 6px x 6px. Apply a gradient and crop out a little hole in the middle. Save the image as a png with transparency.
Note that the image below is zoomed in 1600%.

A zooomed in border image showing off the gradient

2. Apply CSS

Apply the following CSS to the element you want to be gradient-bordered.

.your-element{
/* the first border is for that graceful degradation
in "bad" browsers */
border: 5px solid #60bec3;
-webkit-border-image: url(border.png) 2 2 2 2 stretch;
-moz-border-image: url(border.png) 2 2 2 2 stretch;
border-image: url(border.png) 2 2 2 2 stretch;
}

3. Finished!

Tada! Now it might look like below.

Example of the gradient border with a little text

Or like this if we have a little more text.

Another example of an image with a gradient border

FYI the following has been tested in Firefox 3.6.4, Opera 10.53, Google Chrome 5.0.375.70 and Safari 5.0.

Feel free to experient with making the image with rounded corners/bigger/smaller/gradient inside/outside. And yea, don’t forget to show it off and post a link of the masterpiece below.

That’s it for now.
Quick, dirty, getting the job done…

/Ida