Styling and Customizing Borders in Blogger

As we all know, Blogger is based on Cascading Style Sheets (CSS). Adding, styling and customizing the borders are easy to implement as it uses the CSS Properties. With the help of borders, you can separate the different sectors of your blog, such as headers, sidebars or can be used to highlight the blockquotes and featured contents.

A blog designer can easily make a beautiful template just using borders and background colors.

Let us see how to style and customize the borders with some examples.

border: 1px solid red

border: 1px dotted orange

border: 2px dashed yellow

border: 3px double green

border: 5px groove blue

border: 3px inset indigo

border: 4px ridge violet

Now let us have an explanation.

Property "border" is used to add the borders while "3px" describes the width, "dotted" describes the type and "orange" describes border color.

More properties can be used for different borders for different sides.

To show border to top: border-top, to bottom : border-bottom, to left : border-left and to right : border-right.

Lets see a working example:

border-top: 3px solid #333333;

border-right: 3px double green;

border-bottom: 3px dashed indigo;

border-left: 3px dotted red;

To implement these border styles and customizations in Blogger templates (or in CSS), you have to first decide where you want it. For example, if you want to style the header section, then find:

#header-wrapper {

(more properties here)

border: 3px outset #215670;

}

Likewise you can also add borders to your Post Sections (#main-wrapper, #main), Sidebars (#sidebar-wrapper, #sidebar) or to Footer Section (#footer-wrapper, #footer). More details can be found in W3 School.