When you use the Insert Image button to add a photo to a post, you may want to add border around the image.
You can add a border to an individual image using HTML or set a border to be added to all inserted images by default using CSS.
Border Attributes
Border Style
The most common styles of border are dotted, dashed, and solid.
Additional border styles are double, groove, ridge, inset, and outset. Using the advanced styles, you can mimic the display of a frame or drop shadow around the image.
Border Color
The border color is defined using a color hex code. For example, the hex code for black is #000000.
You can find some color hex codes here and here.
Border Width
The width of the border is typically set in pixels. e.g. 2px, 4px.
Add a border using HTML
To add a border to single image, you can edit the HTML of the image tag. After adding the image to your post, click to the HTML tab and locate the image code. The image tag will be similar to:
<img class="asset asset-image at-xid-6a00e009942b4c8833015432d8eb7d970c" style="width: 400px; display: block; margin-left: auto; margin-right: auto;" title="Grand-tetons" src="https://help.typepad.com/.a/6a00e009942b4c8833015432d8eb7d970c-400wi" alt="Grand-tetons" />
Within the img tag, add the border: #000000 6px outset; to the style attribute.
<img class="asset asset-image at-xid-6a00e009942b4c8833015432d8eb7d970c" style="border: #000000 6px outset; width: 400px; display: block; margin-left: auto; margin-right: auto;" title="Grand-tetons" src="https://help.typepad.com/.a/6a00e009942b4c8833015432d8eb7d970c-400wi" alt="Grand-tetons" />
Where you can enter your own color code, border width, and border style in the code.
Add a border using CSS
To apply a border to all images by default, you can use Custom CSS. Custom CSS is a feature available with the Unlimited, Premium, and Business Class plans.
At Design > Custom CSS, you can enter the CSS code for the image border into the text field and click Save Changes.
.entry-content img { border: #000000 2px solid; }
Where you can enter the preferred color hex code, width, and style.
Examples
Custom CSS
.entry-content img { border: #00008B 4px solid; }
HTML
<img src="https://help-orig.typepad.com/.a/6a00d8350328d253ef0153915ff7fb970b-400wi" style="border: #00008B 4px solid;" />
Result
Custom CSS
.entry-content img { border-right: #999999 10px outset; border-bottom: #999999 4px outset; border-left: #000000 4px outset; border-top: #000000 4px outset; }
HTML
<img src="https://help.typepad.com/.a/6a00e009942b4c8833015432d8eb7d970c-400wi" style=" border-right: #999999 10px outset; border-bottom: #999999 4px outset; border-left: #000000 4px outset; border-top: #000000 4px outset;" />
Result
Not quite what you are looking for? Check out these other articles:
- For sidebar images, see the article on adding images to your sidebar.
- To remove the default borders from images, see the articles on editing the Theme Builder settings.