Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

How To Create A Custom Border Using CSS3 border-image

February 25th, 2010

In this tutorial I’ll show you how to use the CSS3 border-image property to create a custom border. This new element allows you to use an image for your border. In my example, I’ll show you how to create a 5px wide gradient border around an image.

Browser Support

Currently, the border-image property works in Safari, Firefox, and Chrome.

Creating the image

The most complicated part of this tutorial is creating the image that we’ll use for our border. At this point, feel free to download the tutorial source files and code along. If you’d like to create your own image, open Photoshop and create a 15px x 15px document.

• Create a new layer
• Using guides, divide the canvas into three horizontal and vertical 5 pixel columns
Fill the entire canvas with a gradient of your choice
• Delete the 5×5 pixel square in the center of the canvas
• Turn off the background layer (making the center square transparent)
• Save for web, choose PNG24, make sure transparency is checked and set the matte to none

Your final image should look something like this. Keep in mind this is zoomed in to 500%

Coding the CSS and HTML

Now that we’ve created our image, it’s time to code the CSS and HTML to get the border working. Here’s what the CSS looks like:

.red-border {
 border: 5px solid #c00; /* optional for graceful degradation */
 float: left;
 -webkit-border-radius: 3px;
 -webkit-border-image: url(border.png) 5 5 5 5 stretch;
 -moz-border-radius: 3px;
 -moz-border-radius: url(border.png) 5 5 5 5 stretch;
}

Here’s what the HTML looks like:

<div class="red-border"><img src="image.jpg" width="150" height="150" alt="image" /></div>

Here’s What it Looks Like

Note the red gradient png has been stretched to fit around my image.

Live Demo

That’s it that’s all. View the live demo or download the tutorial source files.

Tags: border-image, css3, gradient