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

Made with DesignCap

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:

Method 1. 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

-------------------------

Not sure how to create a Child Theme? A  great resource for creating a Divi Child theme can be found here:  https://www.elegantthemes.com/blog/divi-resources/divi-child-theme

Method 2. Use a Plugin

If you do not want to mess with installing a child theme, another option would be to add the wpuntexturize plugin. Go to “Plugins > Add New” in your WordPress admin dashboard. Search for wpuntexturize and find the wpuntexturize plugin. Install the plugin and activate it. 

 That is it, either one of those methods is all you need to do.

SEO-Alien

About the Author:

Launched in 2009, SEO-Alien began as a hands-on digital playground—a living archive of marketing predictions, strategic insights, and curated references for tools I relied on daily to drive organic growth. This was a time when content strategy and search optimization were the primary lifelines for digital visibility, long before social media marketing matured into a mainstream channel. Over the years, that foundational "diary" has evolved into an authoritative, tactical resource for advanced WordPress optimization, topical authority mapping, and enterprise-grade search engine marketing strategies.

Pin It on Pinterest

Secret Link