How to Add Text Frames and Borders to Blogger Blogspot Post

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!!!

Add Border in Blogger Posts

I have recently added border in all of my tutorial posts to isolate the different steps involved. This gives me the advantage of creating a sub-post-like content. Not only it improves the readability of my blog, it actually adds a little bit to the cosmetic aspect too.You might want to add borders in your posts (emphasize on 'in', as opposed to 'around') for various reasons. You can style it however you want, by giving it different colors, sizes, and styles. Here's an example of what you will achieve at the end of this tutorial.

I've added a border around this portion of my post to isolate this content from my other contents.

It does look good too, and it is extremely simply to add!

Step 1:

Create a new post. Head over to Edit HTML mode and paste the following lines:

?

1 2 3

<div style="border: 1px solid red; padding: 10px;"> Add your content here. </div>

Step 2:

Go to Compose Mode and you will have your border there. Just add your content in it. Alternatively, you can compose your content first, then switch to Edit HTML mode and add the opening <div> and closing </div> tags above and below the content that you want to add the border to.

Border Cusomization:

There are three properties defined for the border and an extra property for padding in the example that I have used in this tutorial.

?

1	<div style="border: 1px solid red; padding: 10px;">

You can customize these properties to create a border that suits your need.

Color	In the example above, I used 'red' as my border color. You can use other colors (eg: white, red, black) or you can even define a hex code if you want a specific color. For example: ? 1 <div style="border: 1px solid #ffffff; padding: 10px;"> This website allows you to generate hex code based on the color that you choose.
Width	I used 1px as my width for my border. You can use other values to adjust the size of your border.
Style	The most commonly used style is 'Solid'. However, you can use other styles like: dotted, dashed, double, groove, ridge, inset and outset. For example: ? 1 <div style="border: 1px groove red; padding: 10px;">
Padding	In my opinion, padding is necessary to prevent your contents from kissing the border line. Try changing the padding from 10px to 0 and see what happens.

Have fun!