How to make Rounded Corners for your blog Content Box Page

Take a look at my personal site: tamal.me, what can you see? You will see rounded corners for the page content box.

Now to do this, we have to consider few things. First we have to make the page invisible, then make the header area invisible, other wise you will be left with white areas that you don’t want to have.

Now add these codes into your thesis custom file editor:

.custom #page {background: none;}
.main .headline_area {display:none;}

So here, we are making the page and headline area invisible. After you done this, you might see the blog area invisible too. Now we have to add a white background to the content area. Add this code,

.custom #content_box {background: #FFFFFF;}
.custom #content {background: #FFFFFF;}

So now you will be able to see the content area, blog posts and sidebar in white. Now lets make a rounded corner! Add this line of code inside of #content_box, where I added #0191C8 as the border color and a minus margin to make sure it doesn’t align improperly.

border: 5px solid #0191C8;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
margin: -5px;

So the final code will look like this,

.custom #content_box {
background: #FFFFFF;
border: 5px solid #0191C8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: -5px;
}

You can make rounded corners for page with #page, the blog post area with #content too! Save and Enjoy