• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Riot Customs

Riot Customs

Genesis WordPress Development, Maintenance & Support

  • About
  • Services
  • Blog
  • Shop
  • Contact

Adding Borders to Images Using CSS

Written by Katrina

3 shares
  • Facebook
  • Twitter1
  • LinkedIn
  • Tumblr
  • Buffer
  • Email


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

Previous Post
Next Post
3 shares
  • Facebook
  • Twitter1
  • LinkedIn
  • Tumblr
  • Buffer
  • Email

Tutorials, WordPress Leave a Comment

Reader Interactions

Share Your Thoughts
Cancel reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Maven Theme

Maven Lite

A single page theme using Kadence. A great theme for a simple site to showcase your skills. Grab this free theme today!

Download Now!

Categories

  • Blogging
  • Business
  • Client Work
  • ConvertKit
  • Freebie
  • GenesisWP
  • Interact
  • Personal
  • Theme Releases
  • Theme Updates
  • Tools & Software
  • Tutorials
  • Web Design
  • WordPress

Master ConvertKit

A kick ass tech course on using the ConvertKit software. Want to start growing your list with the best email marketing software out there? What are you waiting for? Grab this course now!

Enroll Now!

Popular Post

change domains dns

How To Change Your Domains DNS

4 Steps to DIY Your Way to A Professional Looking Website

About Lead Your Page + Giveaway

How to Use the Landing Page Template

Buy me a coffee
Newsletter

Tails from the Beast

Join our newsletter for tips on how to use the WordPress platforms. Advance your skills, and most importantly, puppy photos.

Please enter your name.
Please enter a valid email address.
Sign Me Up!

Thanks for subscribing! Please check your email for further instructions.

Something went wrong. Please check your entries and try again.

Development Information

  • How it Works
  • Trusted Partners
  • Portfolio
  • Client Portal

Explore

  • Resources
  • Terms of Service
  • Privacy Policy
  • Disclamier

© 2009 - 2023 Riot Customs, LLC.

Powered by Flywheel & Beaver Builder.