CSS3 Border-Image Property: Making Photos Really Cool!

By . in Coding. Updated on .
This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

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 elements 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 supported in 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 to 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 height.

Also, in this demonstration we will use this stunning Cinemagraph by From Me to You as the photo.

(Image source: From Me To You)

The markup

The markup is as simple as this:

<div class="wrapper">
	<img src="path/photo.jpg">
</div>

Don’t forget to replace the path/photo.jpg with your own photo.

The styles

And then, let’s give it a frame using border-image.

If you look at the image above, our image width is 180px in total. This value can then be divided into 6 which each division being 30px; and so we will slice the image for 30px.

If you use length value for the slice, you should exclude the px unit, as it will automatically be translated to pixel, but if you decide to use percentage you will still need to add the (%).

As for the image repetition, we will use the default; repeat. Alternatively, you can use stretch, and don’t worry, the border image will still look graceful.

img {
	border-image:url("images/frame.png") 30 repeat;
	-o-border-image:url("images/frame.png") 30 repeat;
	-moz-border-image:url("images/frame.png") 30 repeat;
	-webkit-border-image:url("images/frame.png") 30 repeat;

	border-width: 30px;
}

In addition, we also want to place the image at the center of the browser window as well as add a background texture to the document to make it more compelling.

html {
	background: url('images/lightpaperfibers.png');
}
.wrapper {
	margin: 20px auto;
	height: 476px;
	width: 675px;
	text-align: center;
}

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.

in this post, we have shown 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

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail