Add a little extra look to your images on WordPress by changing the border color and/or border style around you images.
Here is a HTML 101 lesson for newbies to HTML that will help give your WordPress images a little extra “pop” by simply changing the border style and border colors around your images.
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;
<img 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.
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 likingand voila!
|HTML Border Styles|
|<img style=”border-width: 2px; border-style: solid; border-color: #880000;”>|
|<img style=”border-width: 5px; border-style:double; border-color: #3300FF;”>|
|<img style=”border-width: 2px; border-style: dashed; border-color: #FF0099;”>|
|<img style=”border-width: 3px; border-style: dotted; border-color: #666699;”>|
|<img style=”border-width: 3px; border-style: dotted solid; border-color: #990066;”>|
|<img style=”border-width: 5px; border-style: solid dotted double; border-color: #009933 ;”>|
|<img style=“border-width: 10px; border-style: groove; border-color: #ffff00;”>|
|<img style=”border-width: 8px; border-style: ridge; border-color: #336633;”>|
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.
|style=”border-width: 3px; border-style: dotted; border-color: #51B1D9;”>|