How to Add Border for Images in WordPress

Staff Writer • February 14, 2013 • 0 Comments

In this article we will tell you How to add border for images in WordPress. Here’s the procedure.

Whenever you add a picture to your WordPress blog or website, it will improve the appearance of your theme and website background if you add a border or frame to your website. There are many WordPress themes which do insert borders to your image by default. You must add certain line of code for making the border of the image. You just had certain lines of code for getting a border for your image. You can understand how to add border to your images in WordPress website with simple steps,

First login as Admin to your WordPress Control panel
Go to Presentation link and choose the WP theme for which you wish to add border for your image.
Open the Theme Editor in a separate tab.
Now open the style sheet in the image which is usually saved as “style.css” in Cascading Style Sheet format. Here you can find the HTML codes for your CSS file. You should find a line for the img, where the border is set as None as shown below,

img {

border: none;

}

Now you should replace the above code by adding an image border as you wish,

img {

border:#C49 2px solid;

padding:4px;

}

If you want a border at the bottom of the image, add this code as well,

img {

border-bottom: #C84609 2px solid;

}

Now update the CSS file and save it. After this you should be able to find a border around the blog images. The border can be customized as per your wish,

1. In order to change the distance between the image and border, you should decrease or increase the number of pixels in the padding option. In the example it is mentioned as 4 pixels, you can increase or decrease as per your requirement.

2. You can also choose different style of borders like “Dashed”, “Dotted”, “Solid”, “Dotted-Dash” etc. In order to replace this you should mention style after the padding.

3. You can also change the color and thickness of the border line, by mentioned the HEX code of your desired color in the CSS code. You can get the Hex codes for various colors from any tool like Paint of Photoshop. For instance, the Hex code for red color is #FF0000 and for blue color is #00FF00. Similarly you can give the Hex code for you any color you desire to be as border color.

Another simple way to add border to your image is by using tools like Microsoft Paint or Photoshop,

First select the image you wish to upload to your WordPress website.
Open the image in Photoshop or Paint or any other photo editing tool.
Now select the color for your image border and paint it completely on the Canvas which should of dimension somewhat bigger than actual image. For example, if your image is 800 X 600 pixels, the canvas size should be 805 x 605 pixels. Now select the image and place it above the Canvas so that you will get a border of 5 pixels surrounding the image. You can use the grid and rulers to place the image exactly in the center. Now save this new image as a jpeg or gif and then upload the same in your WordPress website. You can also find option for adding image borders in various photo manipulation tools.

This is a simple and easier way to add image borders to your WordPress site.