How to Make Rounded Corner for your Site

Rounded Corner is in and it added attraction to your post and most of all of to your site. I pushed my self to learn a rounded corner thanks to my hubby, he wanted a rounded corner around he's body post and i finally found out how after many attempts and trial and error of course with the use of cornershop a corner generator to get a perfect corner (I tried to make my own but it looks funny) glad i found this generator thanks to the creator.

What we need?
corneshop - corner generator
wellstyled - Colorscheme Generator

First decide what color you want, this is important because you need to work with your template background and the color of the box, when you create the graphic you need to make sure that page background will blend to the color of your template...you will find that after you follow my tutorial and then you can just play around of the color scheme for your post body.

I assume you have already open the Cornershop and WS -- copy the color code (RGB) that you want to the cornershop box background and page background, you will see the result when you click create graphics make sure you put 20 in the corner radius if you want the result the same as to my demo otherwise experiment according to your likeness of how round you wants the corner to be.

Before we start to the rounded corner first, Click Ctrl+F type .post { them make sure your background is the same as your page background

.post {
margin:.5em 0 1.5em;
background: #FF66AA;
}

Work with CSS Code and HTML
After you click the create graphics you will be given a code CSS Code, HTML and 4 graphics (right click, save link as then upload to Google pages or any free link uploader) this is all we need to create this nice rounded corner.

Go to your Dashboard - Layout - Edit HTML (Make sure you save you full template to make it safe)

1. Click Ctrl+F ]]></b:skin> then copy the CSS Code above the ]]></b:skin>
2. Replace the 4 links according the each code (se.gif, ne.gif, sw.gif and nw.gif) Then save.

Now, the tricky part HTML Code -- You must place them in the right place or else disaster (Just Kidding).

• Click Ctrl+F type <div class='post hentry'> -- Place the HTML Code green after the above code.
  

<div class='box'>
<div class='boxtop'><div></div></div>
<div class='boxcontent'>
<!-- Content goes here -->
</div>
<div class='boxbottom'><div></div></div>
</div>

• Click Ctrl+F again this time type <div class='post-footer-line post-footer-line-3'/> -- Place the HTML code Blue before </b:includable>
  

Do not save yet, click Preview to make sure you won't get error, if satisfied then save.

I suggest to use a test site until you know what your doing and confident enough to place it to your site to make it safe and not to lose your template designs etc. and i hope you enjoy this as much as i am.