Adding Unique Borders to Your Images

You may have noticed that I have a gold border around most of the images on my blog. I choose gold as a border because it is one of the colors I'm using to give my blog a cohesive look.

In this post, I want to show you how you can add your own unique borders to your images. You can do as I have done and apply the same border to all or most of your images, or you can apply a border to a particular image.

I'm not an expert on CSS and HTML coding. In fact, I know very little about it. But there are lots of great tutorials out there which can help you know what code to use and where to put it in your template. I use Blogger as my platform, so I specifically search for tutorials related to it when I'm trying to find out how to do something.

It's easy enough to add a border that's a color around your images. The code for that is:

      .post img { border: #000000 2px solid; }

Using that code results in a thin black border around your images in your blog posts.

I didn't want just a flat looking border, however. I wanted the gold in my border to shine. So, I started looking around for other ways I could achieve that.  I ran across information about how you can create borders with images using CSS3.  I didn't really understand the technical explanation of it, but I thought that this could possibly be my ticket to a shiny gold border if I could figure out how to do it.

So I searched for more information and found a site that allows me to generate a CSS3 border from an image.  I can upload the image from my computer or I can copy the image location from where it resides on the internet and paste that in to generate the code for the border.

To find an image that I wanted to use as my border, I again went to Creative Commons and used CC's image search to find an image that has no restrictions on its use.  Going back to my previous post about using images to customize your blog, I decided that a rope border would fit perfectly with my rustic-cowboy-ranch theme.  I had added the rope image I found to a Picasa Web album, so I right-clicked on that image and copied the image location.  Then I pasted it into the IMAGE: line of the border-image-generator.  You will immediately notice that once you've pasted the image in and clicked off that line that the border appears at the bottom with code.  Then you can make choices about border size, offset, and border repeat.  You can also choose to remove the center of the border (fill border), which I recommend.

You have to play around with these choices until you see a border that looks like you want it to look.  Border size is of course the width of the border on each side.  If you can't get this perfectly proportioned using the generator, you can adjust this later in the template when you paste the code into it.  The offset option helps keep the border from being distorted no matter the size of the image.  The border repeat will determine if the border is rounded, repeated or stretched.  I always use rounded, because that looks the best to me.

 In my image above, I have added the rope border.  This is how I generated it in the border-image-generator.

So, to add the border image to every blog post, I would add the code generated by the border-image-generator to my template (Template - Edit HTML - look for

and insert the following code immediately before it):

.post img {
border-style: solid;
border-width: 16px 21px 15px 22px;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
}

If I wanted to change the border width at this point, I could.  For example, I could make all sides the same width by changing my code to: border-width: 15px (make it thinner by decreasing the number or thicker by increasing the number).

If you want to add the border to a single image, you can do that in your post that contains the image.  Once you've inserted the image in your post, click on html.  You'll see the code for the image.  Look for the part of the image that has code like this:

img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjmqhERdbRPOeLZeA0ZIAazI1Dlf9xlqei2A1eAAt64VUYKz160EjdfT7luZphrVLL1kfplXKvkoAidsPtfJS1HDWZHvShbrKIzVLft5RgZ1qOUzwWJmOoWI7RvhXYBR2wdUU08OTBjJo/s400/customize2.png" width="400"

Immediately after the src statement (src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjmqhERdbRPOeLZeA0ZIAazI1Dlf9xlqei2A1eAAt64VUYKz160EjdfT7luZphrVLL1kfplXKvkoAidsPtfJS1HDWZHvShbrKIzVLft5RgZ1qOUzwWJmOoWI7RvhXYBR2wdUU08OTBjJo/s400/customize2.png") insert style= and then the code in quotes that was generated by the border-image-generator.  In my example, it would be:

style="border-style: solid; border-width: 16px 21px 15px 22px; -moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round; -webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round; -o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round; border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;"

Just for fun and to show you how you can really customize your images depending on your theme, I decided to try an animal print border.  This is the code from the border-image-generator.

Using that code, I can add this border to my image or images.

So, in this post alone, I've used three different borders - my shiny gold one, a rope border that fits the theme, and an animal print border just for kicks.