Adding Borders to Images Using CSS

Adding a border to your images can give your site that little something extra to your design.

Example:

img {
    border: 3px solid #ddd;
}

So let’s get into what this actually means

Width: 3px – the size of the border in pixels
Style: solid, dashed, dotted, double
Color: #ddd (#dddddd) HEX code

---

Using the single link will apply to the whole image. If you want different colors, width or area with a border you’ll have to separate the properties.

img {
    border-top: 1px solid #3fb8af;
    border-right: 2px solid #7fc7af;
    border-left: 3px solid #ff9e9d;
    border-bottom: 4px solid #ff3d7f;
}

---

*Note: using img will do this to all of your photos. If you’re looking to only use a selected amount of photo you could do something like this…

.pygs img {
    border: 3px solid #fff;
    outline: 1px solid #ddd;
}

Results