How to Add Borders to Website Images

Updated on November 13, 2018
DaltonOverlin profile image

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

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

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

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

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

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

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

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

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, owlcation.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://owlcation.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)