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:

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

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