Rounded Corner Headers for Blogger. ~ The Blog Doctor.

Rounded Corner Headers for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Here is the new header made from Cornershop utilizing rounded corner graphics CSS and HTML. See picture below

You can make your own corners complete with your choice of colors for the background and size. This will give a distinctive header to your blog which will stay in the visitor's memory and hence increase brand recall.............

To design your own header visit the Cornershop site and enter in your choices for Box background, Page Background, Corner Radius and Transparency. You can choose the hexadecimal number for your colors at this online color picker site. After entering your values click the Create Graphics button and four corner graphics are generated for you.

Right click each graphic and choose Save Image as and save them to a location on your harddisk. You cannot use these until you upload them to a freehosting service. For this you can use Googlepages or any other. Try not to upload them to Blogger posts as the URL/links can be difficult to extract with more chances of errors. After uploading to the freehosting copy down their links/URLs.

Then copy the CSS code generated at the Cornershop site. Login to Blogger Dashboard and click onLayout. Then click on Edit Html subtab of Template tab. Backup Template first. Scroll down and paste the code in the header section of the CSS template just below this line :

/* Header

The CSS code will look something like this:

.box {
background: #000000;
.boxtop {
background: url(ne2.gif) no-repeat top right;
.boxtop div {
height: 100px;
background: url(nw2.gif) no-repeat top left;
.boxbottom {
background: url(se2.gif) no-repeat bottom right;
.boxbottom div {
height: 100px;
background: url(sw2.gif) no-repeat bottom left;
.boxcontent {
padding: 0px 100px 0px 100px;

REPLACE THE PICTURE NAMES (nw2.gif, se2.gif etc..) with the URL/links of the same graphics you uploaded to your freehosting.

Then copy the HTML code from the Cornershop site. Scroll down in your template and paste this code :

<div class='box'>
<div class='boxtop'><div></div></div>
<div class='boxcontent'>

immediately after this line :

<div id='header-wrapper'>

Then scroll further down till the end of the header-wrapper code :

<div id='main-wrapper'>

Paste the code below immediately before the above two lines :

<div class='boxbottom'><div></div></div>

Save Template. Refresh Cache. View Blog. Enjoy!


Add Picture to Header.

How To Customize Header.

Fixed Headers in Blogger.

Clickable Headers in Blogger.

Header for Dots Template.

Many Headers - One Blog.

Flash in Header.

Animated Gif In Header.

3-D Banner In Header.

Adsense Link Unit In Header.

Remove Title in Header.

Picture In Header- Update.


Konkoff said...

Thank you very much!

Jessica said...

Thank you for your tips! I'm trying to add the rss box under every post, how can I do to put it in the same line with "posted by.." (at the beginning of this line). Thanks!

vin said...


What is your blog url? My email address is in left column for detailed help.

Sandy said...

I must not be worse than a dummy because I still cant figure out how to put my Yahoo! Avatar on my sidebar. Can you help with step by step instructions?

vin said...


If Yahoo had wanted you to put your Avatar in the sidebar it would have provided a method to do so. If you are sure there are no copyright restrictions you can email me for detailed help. The address is in the middle column.

Amanda Kennedy said...

Hello Vin,

The Cornershop corners are a truly great idea! I'm so glad you discovered them. After some experimentation, I've discovered it's also possible to use them to round the corners of sidebars too.

Thanks for the great post!

vin said...

Hi Amanda,

You can use them for any container in the template.

Broderick Allen said...

worked great...thanks


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.