Last week I've done major blog enhancement to make it more functional and user-friendly. Now that I'm 90% done I want to get back to my writing and share a very nice tip on how to make your borders round.Having a round borders somehow add style to your blog and when used properly it can take your blog design to the next level. Round borders are most likely applied to links to give more impression that it is a button.
So moving on, first thing to do is to Back up your template. Go to Part 1 of the tutorial to know the steps on how to back up your template. Next is find what borders you want to make round. Let's say you want to make your header borders round. I assume that your in "Edit HTML" tab now so find this code #header-wrapper and add this two lines of codes inside "{" "}"-moz-border-radius:10px; *For Mozilla Firefox
-webkit-border-radius: 10px; *For Safari and Google Chrome
You can change radius pixels depending on your need just make sure that you change both -moz and -webkit
Also make sure that this two have the same value. Example code:
#header-wrapper {
width:600px;
margin:0 auto;
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
background: #ffffff;
}
