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: 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.

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.

5 Comments

Marta Kadle on 07/17/2019 at 12:29 am

Nice work!, your post are always helping people. Keep up the nice job. will be back again
Nisha Jain on 02/19/2018 at 2:22 am

Great explanation about How to Change Border Style and Border Color in WordPress.thanks for all sharing this
akashcrossgraphicideas on 08/14/2017 at 4:19 am

Use proper CSS to style tables. See https://css-tricks.com/complete-guide-table-element/, among other guides.

To add CSS: If you are using WordPress 4.7, use the “Custom CSS” option in the customizer. If your theme has a custom CSS option, use that to add the CSS shown above. If not, install the plugin Simple Custom CSS. Or, if you have Jetpack installed, enable its Custom CSS module.

Learn the Chrome Developer Tools to help you see and test changes to your CSS.

Ref- http://www.crossgraphicideas.com/
Kepran Infosoft on 03/08/2016 at 12:57 am

Good Article.
Sharon Michaels on 01/28/2015 at 11:50 pm

Hi Mike,

Thanks for sharing this great information with us. You have explained all the things in a very good manner. Keep it up!