I have five years of experience coding websites using the HTML and CSS coding languages.
What Will I Be Teaching in This Tutorial
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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