How to make Border in blogger Posts

A-o-A! Yesterday I was searching some html codes and CSS3. I just saw in a blog a border that has some quoted text. It was looking so nice, then I thought why I was not using this. So guys now I want to show you how to make borders in a post in blogger. Borders has some different styles so we can use what we want. Without wasting of time let's get started!






Make a border in post

Go to Blogger

Create New Post

Head over to HTML

Now Paste the code there see below

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

Now click Compose you will see a border has made.

Border Customization

There are three properties in a border and an extra padding property in the example that we used in this tutorial.
<div style="border:1px solid red; padding:10px;">
You can customize the border with your properties that suits your need.

1. Colour: In the example above I used 'Red' color. You can use other colors like blue, black or white.
2. Width: I used 1px as my width of border. You can use other values for your border.
3. Style: I used 'Solid' for my border you can use other styles like groove, double, ridge, dashed and dotted.
4. Padding: In my opinion, padding is necessary to prevent your contents from kissing to border line. Try changing the padding 10px to 0px and see what result comes.

That's it guys. Have fun with your border. keep practise and if you have a question about that submit here a comment and I will come to you early as possible.

Happy blogging :)