Border Customizaiton : How to Customize Blog's Border?

Borders are essential to increase blog's outlook beauty. To increase the beauty of any blog, we may enable or disable blog's border or even may change it's color, style, width, height etc. This page presents a helpful basic idea about customization borders. You don't need to know anything except reading this page.

No technical knowledge is required. Just follow the instructions.
Only 2 steps solution.

[Note: Remember, don't forget to back-up your blog before doing that. To learn how to back up, click here to read.]

What is border?
Borders look like rectangle boxes. In Blogger's default template, you can see several types of border around header, between posts and sidebar.

What to do to customize or edit border?
Step 01: At first do the following things:

• Go to "Dashboard" and click on "Layout"
• Select "Edit HTML"
• Click on the check box of "Expand Widget Templates"
  

Step 02: Find the code that corresponds to the borders:

border:1px solid $bordercolor;

(it means border-key: width style color; )

Here Minima's code is displayed. Your code may be some different but it must be start with "border:". So, use "CTRL + F" and find by using "border:"

Let, change the following things as your wish:

• border-key: may be border, border-left, border-right,...etc.
• width : use 1px to 2px, 3px, 4px, 5px, 6px,....etc.
  
• style: may be solid, dotted, dashed, double.... etc.
• color: may be any hex value or red, green, blue..... etc.

Example: let we have the following outlook:

Now we want to change & want to do the following looks:

So, we have to modify the code in the following way:

border:5px dotted blue;

More explanation : Techniques of border customization:

Moreove, you can more customize your blog's border. There are so many cool style you can use. Such as, you may change each border with each color. For example, we customize the "sidebar-wrapper" by the following code:

#sidebar-wrapper {

border-left: 10px solid red;
border-right: 10px solid blue;
border-top: 10px solid orange;
border-bottom: 10px solid green;

width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

We just added the blue-background code. Those 4 lines alos add to the hearder border too. Now, the outlook of the blog will look the follwoings:

new outlook of blog

Advanced Discussion : Techniques of border customization:

At first remember the following format:

border-key : width style color

Now, all the parts are discussed more details:

border-key:

A border is made of a rectangle. If you use only "border", it means the whole 4 lines of a rectangle. If you use "border-left", then it indicates only the left line of the rectangle. So, we can define the 4 lines of a rectangle as "border-left", "border-right", "border-top" and "border-bottom". The following table shows the meaning of border:

border-key:	meaning
border	means the whole rectangle border
border-left	means all the border's left part only
border-right	means all the border's right part only
border-top	means all the border's top part only
border-bottom	means all the border's bottom part only

name of border's side

width:

It indicates the width of the border. It may be form 0 to 1, 2, 3 etc. If you use 0 value, the border will not be displayed. Otherwise, the more you increase the value the thickness of the border will be increase. For example:

if you put width value = 1, then it looks like: ------------------------
if you put width value = 3, then it looks like: --------------

style:

It indicates what will be the style of the border. Borders style may be "none", "solid", "dotted", "dashed", "ridge" etc. Look the followings for different types of borders outlook:

border value	meaning
none	no border
solid	single line segment
dotted	series of dots
dashed	series of dashed
double	two solid lines
groove	"carved" into the canvas
inset	looks like embedded in the canvas
outset	looks like coming out form the canvas
rigid	reverse looking of groove

types of border

color:

You can select any color. It's may be "red", "green" etc. color name or you can choose any hex value of a color. All hex value of color value can be available in this link, click here. Now copy the hex value of your desired color and put that value.

I think, you are able to customize your own way. Enjoy!! The beauty of blog borders !!