Creating borders is nothing new in HTML & CSS; we’ve been able to add borders since the beginning. You may have been familiar with solid borders, dotted borders, dashed borders and so on.

But, with the new CSS3 border-image property, creating borders on HTML element is becoming more advanced; well, simply put, we are now able to add a border using an image as the source which will allow us to add more attractive borders. All right, now let’s see how this property works:

Syntax and Browser Support

The border image in CSS3 is defined using the following shorthand syntax:

border-image: [image source] [slice] [width] [outset] [repeat];

The syntax above is the official version from W3C that is only supported in Chrome, while Opera, Firefox, and Safari are still requiring the prefixed version (-o-, -moz-, -webkit-), and the Internet Explorer unsurprisingly does not support this property at all.

Furthermore, the [width] and the [outset] value in this border-image property are not yet supportedin any browsers, however, the width value can be replaced using the border-width property.

So, in short, for now we can only apply the value of [image source], [slice] and [repeat] .

border-image: [image source] [slice] [repeat];

Image Slice

Before we proceed to demonstrate this property, let’s talk about the “image slice” first as it is something new in declaring a property. The image slice here will define the cut of the image which respectively takes the starting point from the top, right, bottom, and left of the image edges that subsequently will also divide the image into nine sections, as illustrated with the following image.

In the image above, you will see that the sections 1, 3, 7 and 9 will become the corners of the border, and the sections 2, 4, 6 and 8 will become the border edge or line, making sure that the section where it will becomes the edge is repeatable or stretchable.

The value of the slices can be declared with a pixel unit or a percentage (%) unit for flexible measurement.

more references:

Creating a Photo Frame

Now, let’s demonstrate the property in a real example.

This time, we are going implement the border-image property to create a photo frame and we will be using the image below as the source. We have carefully measured the image so it can be properly sliced, repeated and stretched regardless of the content width and the height.

Final thought

This border-image undoubtedly is a nice addition in the CSS3 family; we are no longer to be limited to the simple plain borders.

And in this post, we have showed you how we can create an image frame without worrying about the content or in this case the photo’s dimensions (width & height). The height and width can be flexible, as long as the border source is repeatable or stretchable.

Lastly, if you are still a bit puzzled about border-image, there is a tool you can use to help you create one more easily: border image tool