Last update: 01/23/22
Add a little extra look to your images on WordPress by changing the border color and/or border style around your images.
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″
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
The same thing apply's to tables as well. Your typical table may look like;
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
// 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: https://www.elegantthemes.com/blog/divi-resources/divi-child-theme
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.