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;
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 {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.
(more properties here)
border: 3px outset #215670;
}
If you enjoyed this article, subscribe to receive more great content just like it.
