WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» How to Add a Border Around an Image in WordPress

How to Add a Border Around an Image in WordPress

Last updated on June 9th, 2015 by Editorial Staff
190 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add a Border Around an Image in WordPress

Do you want to add a border around your images in WordPress? Recently, one of our users asked us for an easy way to add border around an image in WordPress. While you can use CSS, it’s confusing for beginners. In this article, we will show you an easy way to add image border in WordPress without editing any HTML or CSS code.

WordPress Image Borders

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Method 1: Using a Plugin to Add Image Border in WordPress

This method is for beginners who do not wish to edit any HTML or CSS. First thing you need to do is install and activate the WP Image Borders plugin. Upon activation, you need to visit Settings » WP Image Borders to configure the plugin settings.

Settings page for WP Image Borders plugin

The first section in the plugin settings allows you to target images. You can add borders to all images in your WordPress posts by checking the box next to ‘Add borders to all images in blog posts’ option.

Alternatively, you can target specific CSS classes to have borders. We will show you how to add a CSS class to a specific image later in this article. Right now you can put anything into the CSS class like .border-image.

The second section in the plugin settings allows you to customize border settings. You can choose a border style, width, radius, and color.

The last section on the settings page allows you to add drop shadows to your images. You can enter a horizontal and vertical distance, blur and spread radius, as well as box shadow color. If you do not want to add drop shadows to your images, then you can simply leave these fields blank.

Don’t forget to click on the Save Changes button to store your plugin settings.

If you selected the first option ‘Add borders to all images in blog posts’, then you do not need to do anything else.

You should see image borders on all your blog post images.

However if you selected the second option to only show border for specific images, then you need to follow the next step.

Adding CSS Class to an Image in WordPress

If you only wish to add borders around selected images, then you will need to tell WordPress which images should have borders. You can do this by adding a CSS class to images that need borders.

Simply upload your image and add it to your post. After adding the image click on it in the visual editor and then click on the edit button in the toolbar.

Editing an image in WordPress

This will bring up image editing popup showing your image details. You need to click on the Advanced Options to expand it, and then enter your image’s css class.

Hint: this is .border-image because we selected that in our plugin settings.

Adding CSS class to an image in WordPress

Next, click on the update button to save and update image settings. That’s all, your image will now have an additional class. Since you are using WP Image Borders plugin, a border will show up on this image.

Method 2: Using HTML & CSS to add Image Borders in WordPress

Adding image borders using CSS/HTML is a faster and quicker way to get borders around your images in WordPress. There are many ways you can do this, and we will show you all of them. You can choose whatever works best for you.

Adding Borders Using In-line Styles in WordPress

After you have uploaded and inserted your image into a WordPress post, switch to the text editor. You will see HTML code for your image. It will look something like this:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />

You can easily add CSS style in the HTML code like this:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;" />

Feel free to change the border width, color, padding, and margin to your own needs.

Adding Image Border in Your WordPress Theme or Child Theme

If you want to permanently add borders to all images in your WordPress blog posts and pages, then you can add CSS directly in your WordPress theme or child theme.

Most WordPress themes already have these style rules defined in the theme’s stylesheet which is usually style.css file. You can modify the existing CSS, or you can add your own CSS in a child theme.

WordPress adds default image classes to all images. In order to make sure that images in your posts/pages have an image border, you need to target all these classes. Here is a simple CSS snippet to get you started:

img.alignright {
float:right; 
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left; 
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block; 
margin-left: auto; 
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone { 
border:3px solid #EEE; 
}

If you want to only use image borders when you need them, then you can add CSS class to your images (see above). Add styling rules for this CSS class in your theme or child theme.

img.border-image { 
border: 3px solid #eee;
padding:3px; 
margin:3px;
}

We hope this article helped you add image border around your WordPress blog images. You may also want to see our guide on how to save images optimized for the web to speed up your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

190 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

12 Comments

Leave a Reply
  1. Reuben says:
    Jan 14, 2021 at 11:08 am

    Trying to get this to work using the Gutenberg editor and instead I get the following error: This block contains unexpected or invalid content.”

    I know there’s no mistake. I’m adding a CSS class in the html but Gutenberg doesn’t like it.

    Reply
    • WPBeginner Support says:
      Jan 15, 2021 at 9:49 am

      That is a WordPress.com error and our guide is for WordPress.org sites. You can take a look at the difference between the two in our article below:

      https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/

      We also have a free transfer service you can sign up for if you would like using the page below:

      https://www.wpbeginner.com/free-wordpress-blog-setup/

      Reply
  2. Aboud Dandachi says:
    May 8, 2020 at 11:07 pm

    The plugin you mentioned apparently hasnt been tested with the last 3 major releases of WordPress. Would not be a good idea to use it then.

    Reply
    • WPBeginner Support says:
      May 11, 2020 at 3:46 pm

      We will be sure to look into updating our article when we are able. For not tested with the version of WordPress message you would want to take a look at our article below:
      https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/

      Reply
  3. Michael Torres says:
    Aug 20, 2019 at 1:27 pm

    Very informative. Thank you for helping us as beginners.

    Reply
    • WPBeginner Support says:
      Aug 21, 2019 at 9:27 am

      Thank you, glad you like our content :)

      Reply
  4. Joey says:
    May 16, 2019 at 4:34 pm

    Excellent. Thank you for the concise and informative post.

    Reply
    • WPBeginner Support says:
      May 17, 2019 at 11:04 am

      You’re welcome :)

      Reply
  5. Eduardo says:
    Nov 4, 2016 at 2:15 pm

    Hi, nice article!

    Do you know any way to put a border with a “wood style”?

    I’m making a wordpress site to show landscape photos and i want to use a wood style border so people couldsee how the picture will be as a real photo frame , can you help me with this?

    Thanks!

    Reply
  6. david says:
    Aug 17, 2016 at 2:01 am

    Very very talented article not so many people on the net and in wp word know how to make thing simple and clear !

    thanks i got my beautiful nice border set nicely

    dav from france

    Reply
  7. Erin says:
    Sep 28, 2015 at 7:48 pm

    This looks beautiful, so clean.
    Is there any way to have images and text (with links) within a box on wordpress. Creating a book reviews site so will have to do this many times

    Reply
  8. Connor Rickett says:
    Jun 9, 2015 at 2:08 am

    Nice little article. There’s a plugin for every basic thing in WordPress, which is what makes it so friendly to beginners. But, you can dive right into the guts of it if you don’t want to run a plugin for something as small as borders (especially since your site is faster without them).

    It was good of you to show the child theme option, since this will add the borders to all images, past, present, and future.

    You might also mention that, by changing the border width and color, you can create “boxes” and “frames” around the images, using nothing but what you’ve got up here already.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
JustHost
JustHost Coupon
Get hosting for $3.95 / month and a free domain registration for life. Can't get any better.
Photocrati Coupon
Get 20% off on Photocrati premium photography theme for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.