- So first let me explain the code behind adding borders. The HTML code for borders is actually really simple.
- Border: 1px solid #000;
- So to break this down it is Border: width style colour.
- The width can be anything you want. 1px would be a very thin border and 5px would be a much wider border.
- The style can be solid, dotted, dashed or double. These styles are pretty self explanatory.
- The colour can be anything you desire #000=black #fff=white #999=dark grey #ddd=light grey.
- There are 1000s of colour codes out there for every desired shade and there are many sites online that can provide these codes for you. Just google HTML color codes to find the colour code you need.
Using the attribute border adds a border all the way around the area you’re applying it too but you want ot place it in your area like a top, bottom, left or right border. Ok then, that is easy to do too. Instead of writing ‘border: width style color’ write ‘border-left: width style color’ (or right, top, bottom depends on your wish)
Maybe you would like to apply a border around your header. And the code for the header area is:
So to add a header border we’d add the following code to the Add CSS box in Blogger’s template designer.
Border: width style color;
To add borders to other areas of your design just replace the bolded area in the code above with any of the following
.main-inner – to add border around the content area which includes the post and sidebar areas
.post-body – adds border to the body of your post but doesn’t included the date
and comment/meta area
h3.post-title – add border around your post titles only
.date-header span – adds border around the date
h2 – adds border to date and sidebar titles
.tabs-inner – adds border to your pages widget
Ok hope you are clear to add borders to your blog. The only thing what you need is to know which part of your template is for what section. Ok let’s also check the styles for the borders that we can use :
- none : no border at all
- dotted : series of dots.
- dashed : series of short line segments.
- solid : single line segment.
- Double : two solid lines.
- Groove : ‘carved’ into the canvas.
- ridge : like it is coming out of the canvas.
- inset : like it is embedded in the canvas.
- outset : like it is coming out of the canvas.
IN ORDER TO CREATE A PROFESSIONAL LOOK OF BORDERS SHOW AT TOP IMAGE CLICK HERE TO GET THE REQUIRED CODES.