Add a little extra look to your images on WordPress by changing the border color and/or border style around your images.

How to Change Border Style and Border Color in WordPress
Here is an HTML 101 lesson for newbies to that will help give your WordPress images a little extra "pop".

By simply adding the style attributes to the border type and border colors around your images and tables, you can make several kinds of visual effects.

When you add an image to your WordPress page from the visual editor, after your image is added switch to the "Text" view and see the HTML code for your image... typically it will look something like;

src="link" width="250" height="250″

Of course, there may be other codes in there like alignment, but that is the basic code we can start with.

All you really need to focus on is the 'style' tag and you can make some pretty dramatic changes to your image border color and border style.

So, now when you enter those attributes, your code will look something like;

< src="link" width="250" height="250" style="border-width: 3px; border-style: dotted solid; border-color: #51B1D9;>

Below are some style attribute examples that you can easily add to your images to change your image border color and style.

In most cases, when you add an image with WordPress, the "style" codes below are not there. So all you would have to do is copy the style codes below, paste it into your existing image HTML, change the border width and color to your liking and voila!


HTML Border Styles

style="border-width: 2px; border-style: solid; border-color: #880000;"
style="border-width: 5px; border-style:double; border-color: #3300FF;"
<style="border-width: 2px; border-style: dashed; border-color: #FF0099;">
style="border-width: 3px; border-style: dotted; border-color: #666699;"
style="border-width: 3px; border-style: dotted solid; border-color: #990066;"
style="border-width: 5px; border-style: solid dotted double; border-color: #009933 ;"
style="border-width: 10px; border-style: groove; border-color: #ffff00;"
style="border-width: 8px; border-style: ridge; border-color: #ff6633;"

The same thing apply's to tables as well. Your typical table may look like;

<table><tr><td>Your Content</td></tr></table>

Just like above for image borders, you can also copy and paste any of the above codes into your table codes like below.

<table style="border-width: 3px; border-style: dotted; border-color: #51B1D9;"><tr><td>Content</td></tr></table>

Note: For the longest time I could not figure out why WordPress was changing my quotation marks so when you copied and pasted the codes above, it broke the code. After all this time (Published on: Dec 22, 2013), today on 7/26/21 I figured out why WordPress was automatically changing "straight quotes" into "smart quotes", and how to fix it.

How To Fix WordPress Quotation Marks on WordPress

How to fix WordPress quotation marks: Go to functions.php (making sure it's in a child theme) and add this code:

// START Disable Curly Quotes
remove_filter('the_content', 'wptexturize');
remove_filter('the_title', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
// END Disable Curly Quotes


That is it, that's all you need to do.

Not sure how to create a Child Theme? A  great resource for creating a Divi Child theme can be found here:

SEO Alien
"Helping small businesses with smaller budgets compete with big brands with bigger budgets in the online market space since 2009."

About the Author:

The SEO-Alien is a project started in 2009 regarding all things online marketing. The site started out more of a diary of predictions, suggestions and references to things I frequently used for online marketing... before social media marketing was even an option.

I hope you find the information and tools presented here useful and something worth sharing with others.

If there is anything else about online marketing or any online advertising strategy you think would be helpful, please let me know.

ahrefs Agency Group Buy Account - Cheap Pricing
Jasper try for free
Try Jasper today for no charge and you will be credited 10,000 FREE credits when you register for the 5 day free trial.
Ninja Forms

Pin It on Pinterest

Some of the links on this page may be "affiliate links", a link with a special tracking code. This means we may get paid commission on sales of those products or services we write about. The price of the item is the same whether it is an affiliate link or not. Regardless, we only recommend products or services we have used, tested and believe will add value to our readers and our editorial content is not influenced by advertisers or affiliate partnerships. Basically, we may earn some much needed 🐶 biscuit money, and we genuinely appreciate your support.

This disclosure is provided in accordance with the Federal Trade Commission’s 16 CFR § 255.5: Guides Concerning the Use of Endorsements and Testimonials in Advertising.