How to Add Text Frames and Borders to Blogger Blogspot Post

Have you ever wanted to add a simple frame or border around some text in your Blogger Blogspot post like the ones below?

Text inside solid border/frame. Text inside dashed border/frame. Text inside dotted border/frame.

Text inside groove border/frame. Text inside ridge border/frame.

Text inside double border/frame.

Text inside inset border/frame. Text inside outset border/frame.

Text inside solid border/frame and colored background.

Text inside border/frame with differently colored borders.

Text inside border/frame with rounded borders (not supported in IE).

Note #1: For each of the examples that follow copy the code in the Blogger's HTML editor after the text where you want the border/frame to appear. Return to visual Blogger's post editor to edit as you like (font, font size, color etc.) these lines

• Type Your Text Here,
• The Text Line After the Border.

Have in mind that, if you want to return to the HTML editor, a code may be rearranged (this can be quite tricky).

---

Few Basic Codes 

The code for all of the above borders/frames, with exception of the last two frames (the one with the differently colored borders and the one with rounded corners), is similar and is a modification of the codes in the next to examples.

Example #1:

<div style="
border: solid 5px #aaaaaa;
background: #FF93E7;
font-size: 18px;
margin: 40px;
padding: 30px;
text-align: justify;
">
Type Your Text Here
</div>
The Text Line After the Border.

The visual result:

Type Your Text Here

The Text Line After the Border.

Example #2:

<div style="
width: 300px;
height:70px;
border: double 6px #00385B;
">
Type Your Text Here
</div>
<br/>
The Text Line After the Border.

The visual result:

Type Your Text Here

The Text Line After the Border.


Attributes explanation:

• The width attribute should be added (with values in pixels or percent, e.g. 500px or 67%) if the width of the whole border/frame is less than the text width.
• The height attribute should be added (with values in pixels e.g. 500px) if you want a border/frame with exact height. Keep in mind that adding this attribute may result in text overflow. So, I recommend skipping this attribute.
• After the border attribute has are three types of values:
  1. solid or, alternatively, dashed, dotted, groove, ridge, double, inset and outset (read carefully the text inside the first 8 frames above),
  2. 5px, which is the border widht,
  3. #aaaaaa which is hex code for the border color.
• The background attribute should be added if you want a colored background inside the text (DIY: try adding a code without the border attribute).
• The font-size attribute refers to the text size. Since this you can edit the text in the visual Blogger's post editor, you may skip this line in the above code.
• The value after the margin attribute is the distance from  each border (top, bottom, right and left) to the surrounding post elements (usually above and below the border/frame).
• The value after the padding attribute is the distance from each border (top, bottom, right and left) to the text inside the border/frame.
• The text-align attribute controls the text alignment (left, center, right, justify) inside the borders. Since the text alignment can be controlled trough the visual Blogger's post editor, you can skip this attribute too.

Example #3: Controlling the width, height and alignment of the border/frame 

The border/frame I was looking for is this one

A NICE DOUBLE BORDER AROUND TEXT THAT WILL STAND OUT!!!

As with the alignment of the horizontal line when added via the <div> tag (explained in the previous post) , the code in Example #1 or Example #2 should be "wrapped" with another <div> tag (the red colored text of the code) as follows:

<div align="center">
<div style="
border: double 5px #aaaaaa;
font-size: 24px;
margin: 40px;
padding: 30px;
width: 50%;
height: 150px;
">
A NICE DOUBLE BORDER AROUND TEXT THAT WILL STAND OUT!!!
</div>
</div>

---

Differently styled top, right, bottom and left border, margin and padding

The top, right, bottom and left border, margin and padding can be differently styled, for example like this: You can  like this you can add in the HTML editor a code.

The outer border/frame is a 1x1 table (e.g. a table with one row and one column). The inner borders are on different distances from the corresponding outer borders. The distances from this text (which is left aligned) to the top, right, bottom and left inner border are different. The text was modified in the visual editor

The corresponding HTML code is:

<table border="2" cellpadding="0" cellspacing="0" style="text-align: left; width: 100%;"><tbody><tr><td style="vertical-align: top;"><div style="border-bottom: solid 6px orange; border-left: solid 3px darkgreen; border-right: solid 6px blue; border-top: solid 6px red; margin-bottom: 10px; margin-left: 50px; margin-right: 20px; margin-top: 65px; padding-bottom: 10px; padding-left: 65px; padding-right: 15px; padding-top: 65px;"><br /><ul><li><span style="font-family: 'Courier New', Courier, monospace;"><b>The outer border/frame is a 1x1 table (e.g. a table with one row and one column).</b></span></li><li><span style="color: #741b47;"><b>The inner borders are on different distances from the corresponding&nbsp;outer borders.</b></span></li><li><span style="font-family: Georgia, 'Times New Roman', serif;"><i>The distances from this text (which is left aligned) to the top, right, bottom and left inner border are&nbsp;different.</i></span></li><li><span style="font-size: x-small;"><b>The text was modified in the visual editor</b></span> &nbsp;&nbsp;</li></ul></div></td></tr></tbody></table>

---

Rounded Borders

Rounded border/frame is not supported in IE (current version 9) when the following code is added trough the Blogger's HTML post editor, but it is supported in Firefox, Chrome, Opera and Safari (current versions running on Vista SP2).

Note #2: When I added the next code to one of my sites created with Google Sites, the rounded corners where visible in IE9!?!

The Code for the Rounded Borders Used in This Post

<div style="
-khtml-border-radius: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: solid 5px #bbbbbb;
margin: 0;
padding: 10px;
text-align: justify;">
Text inside border/frame with rounded borders (not supported in IE).
</div>

---

Have fun using the above codes!!!

Update (MAY 16, 2012): Check the CSS 3.0 Maker text borders ideas.