How to Add Borders to Website Images - Owlcation - Education
Updated date:

How to Add Borders to Website Images

I have five years of experience coding websites using the HTML and CSS coding languages.

What Will I Be Teaching in This Tutorial

how-to-add-borders-to-website-images-using-css

In this tutorial, I will be showing you how to add borders to your website images using CSS. I will start by showing you how to add borders, the types of borders, and even show you how to change the colors of the borders. This tutorial will not be for beginners, so this tutorial will assume you have at least a basic understanding of HTML, and CSS website coding languages.

Part 1. How to Add Borders

how-to-add-borders-to-website-images-using-css

There are a few ways you can add borders to your website images, using the CSS coding language. I will list the ways you can do this below, that includes adding a border to all website images bearing the "img" tag. Adding borders to images with specific id's, or using the class code to do the same. Alternatively, I will also show you below how to add borders to a specific image by directly placing the border code in the HTML of the image using the style code.

Code to Add Borders to All Website Images

img { border: 3px solid black; }

To implement this code into your website add it to the CSS style sheet of your website, and this will add a border to all images on your website.

Add Border to Image Using Id Code

#idofimage { border: 3px solid black; }

To add this code assign an id to an image on your website, then utilize the code above by adding the code to your websites style sheet, and replace the id above with the id you assigned to your image.

Add Borders to Images Using the Class Code

.tochangeborder { border: 3px solid black; }

To use the code above assign a class name to all images on your website you want to have a border. Then add the above code into your websites style sheet code, and replace the class name with the name you chose.

Add Border Code Directly

<img src="yourimage.jpg" style="border: 3px solid black;">

This code above by using the style code will allow you to add borders to a specific image by placing the CSS border code within the HTML style code of your image.

Part 2. Types of Borders

how-to-add-borders-to-website-images-using-css

Now I will show you the different types of border shapes that you can use, to surround your website images. Theoretically, you could also add borders to almost every other website element by using the border code, but for this tutorial, the focus will remain on images.

Codes for Different Shaped Borders

border: 3px dotted black;
border: 3px dashed black;
border: 3px solid black;
border: 3px double black;
border: 3px groove black;
border: 3px ridge black;
border: 3px inset black;
border: 3px outset black;

As you can see above there are eight different types of border shapes that you can choose from to add to your images. Below I will show you an example of what these codes look like when they are displayed in a browser to help you choose your favorite one.

How the Codes Look in a Browser

how-to-add-borders-to-website-images-using-css

This is how these eight different styles look in a browser, so hopefully, this will help speed up your understanding of how these border styles look. Perhaps even helping you find your favorite border style, for whatever project your working on.

Part 3. Border Sizes

how-to-add-borders-to-website-images-using-css

I will now show you how to make some more modifications to your border codes, so lets first take a look at how to change the border sizes. By doing this you will be able to change the size of the borders, by modifying the width of the border that is counted in pixels.

Examples of How to Change Border Sizes by Changing Number of Pixels

border: 1px solid black;
border: 2px solid black;
border: 3px solid black;
border: 4px solid black;
border: 5px solid black;
border: 6px solid black;
border: 7px solid black;
border: 8px solid black;
border: 9px solid black;
border: 10px solid black;

As I have demonstrated from the above code in order to change the size of the border you must increase the pixel number. So for example, to increase the size of the border increase the value of the number that comes before "px" in the CSS code. Take note that there is no maximum number of pixel size, so you can make the border whatever size you deem suitable for your project.

How These Pixel Sizes Display in a Browser

how-to-add-borders-to-website-images-using-css

From this example, above you can get a better understanding of how increasing the pixel size of your borders will look in a browser.

Part 4. Border Colors

how-to-add-borders-to-website-images-using-css

In this last bit, I will show you how to change the color of your borders, and give you some colorful examples. By doing this you will be able to make your image borders match your websites color scheme, or perhaps even match the distinctive color of whatever image you're placing a border around.

Examples of Different Border Color Codes

border: 5px solid black;
border: 5px solid green;
border: 5px solid lime;
border: 5px solid red;
border: 5px solid blue;
border: 5px solid purple;
border: 5px solid silver;
border: 5px solid gray;

To change the color, you can either type the color as shown above, and you could also use what is called hex color codes. This way if you want a more precise color you could use hex colors to achieve this goal. If you want to learn more about hex codes just Google it and you should be given some really good examples to choose from.

How These Codes Look in a Browser

how-to-add-borders-to-website-images-using-css

This above is what the earlier shown color codes look like when they are displayed in a browser. This is about all that there is when it comes to changing the border color, and a good example to help you understand how to change the colors of website elements.

Drawing a Conclusion

how-to-add-borders-to-website-images-using-css

Now that you've reached the end of this tutorial hopefully you've gained a better understanding of how to add borders to your website images. By what has been demonstrated here you could use this information to make borders of different colors, sizes, and shapes to match the overall style of your website.

I thank you for reading and hope that this tutorial has helped you better understand how to add borders to your website images.

© 2018 Dalton Overlin

Related Articles