Adding Professional Borders To Blogger Posts

Add borders to your blogger posts. Any how if you are reading this post you are bit interested in adding borders to your blog ok then lets start creating professional borders tutorial. The first box below shows how the code should be and the remaining boxes under the first box are the example for different type of borders you gonna create it. The code for the respective borders are given in box below.

Add Professional borders to your blogger posts

How to use the code :

  • In order to add borders to your posts 
  • login –> new post –> then go to HTML TAB at right top and just paste the below code into your box
  • That all then shift to COMPOSE TAB and you find your respective box there you can type your content in that box.
  • If you want to change the style of your box just use the code I gave below in boxes and just replace the code in 
    How to Add cloud like label widget in blogger

      What Is Padding In Given Code ?

      Padding helps you to change the size of box. For example please look at the last box below. You can test it by just changing the padding: 10px  change the 10 to your size in your code. Just keep checking it by increasing or decreasing it.

        ( Type You Content Here)

        border: 3px solid #000000;

        border: 3px dotted #000; padding: 10px;

        border-style: outset; border-color: #404040;

        border-style: outset; border-color: #404040;

          border-style:ridge (CODE FOR BORDER RIDGE)

          border-style:inset; (THIS IS CODE FOR BORDER INSET)

        Example For Increase In Border

        Example For Padding ( INCREASED SIZE )


        This is also so simple. Then only think what you need to know is inserting the colour code into your code.
        The below is the simple code in order to create a border and also with a background colour.

        The below is the example how the above code looks. Just change the colour code if you want to change the background colour.

        background: #333333; border: 5px solid #666666;

        Adding image to background is also quite simple with the below code. Just have a look at this.

        border: 3px outset #99cccc; background: #99cccc url(http://imagehost.image.jpg);

      Article By Tharun

      Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.


      1. bouch Rashid says

        Thanks a lot Mr Tharun for your interesting post .
        if you pleased i want to know to code to put all posts in my blog home page in a border , so that the posts being separated clearly just like your homepage posts
        you can take a look in my blog to see how my posts are not separated by borders .

      2. says

        good to see you here and thanks for your comment. Every post in your homepage is customized .post { followed by your code }, if you still need our help please contact us on social media. for quick response.

      3. says

        This worked for me for an individual post, but I can’t seem to format all of my blog posts at once. I would also like to format all boxes with the same border. How do I do both of those changes?

        • says

          Hey thanks for dropping here. In order to make it work for all posts by default. Create a backup to your template. In your TEMPLATE >> EDIT HTML find for ]]> and paste the below code above it


      Leave a Reply