How to Add CSS Borders in Blogger - Complete Guide

Today, in this article we are going to discuss about CSS Borders. When it comes to our blog design, we use different techniques and methods to make our blog more beautiful. We use CSS transitions, backgrounds, shadows etc. There are hundreds of techniques that you can use to make your blog more beautiful and one of them is border. Simply, we can say that a border is separating line between two elements/sections. You can use borders for your navigation menus, headings, sidebar headings or whatever you want. If you don't know that How to Add CSS Borders in Blogger, so today in this article we'll learn that How to Add CSS Borders in Blogger.

Simple Border

Simple Border

CSS Code ::

border: 4px solid #000000;

The above code is for adding a simple border. 4px is the width of border and #000000 is the color of border. You can change them according to your own need e.g 1px, 2px, 6px, 8px etc. You can use our color code generators for HTML color codes.

Colorful Sides

Colorful Border

CSS Code ::

border-bottom: 3px solid #000000;
border-top: 3px solid #d33a38;
border-left: 3px solid #2aa4cf;
border-right: 3px solid #00cc00; 

This is a border having different colors for its four sides. The first line is for bottom border, 3px and #000000 is the width and color of the bottom border. The second line is for top border, 3px and #d33a38 is the width and color of the top border. The third line is for left border, 3px and #2aa4cf is the width and color of the left border. The fourth line is for right border, 3px and #00cc00 is the width and color of the top border.

Border Radius

Border with Radius

CSS Code ::

border: 4px solid #000000;
border-radius:8px;

This is a border with rounded corners. It is done by adding border radius. In the above code 4px is the width of border, #000000 is the color and 8px is radius of the border. You can change then according to your own need.

Colorful Border with Radius

Colorful Border with Radius

CSS Code ::

border-bottom: 3px solid #000000;
border-left: 3px solid #2aa4cf;
border-right: 3px solid #00cc00;
border-top: 3px solid #d33a38;
border-radius:8px;

This is a colorful border with radius. The first line is for bottom border, 3px and #000000 is the width and color of the bottom border. The second line is for top border, 3px and #d33a38 is the width and color of the top border. The third line is for left border, 3px and #2aa4cf is the width and color of the left border. The fourth line is for right border, 3px and #00cc00 is the width and color of the top border and 8px in the last line is its radius. You can change all these colors, radius and its width according to your own need.

One Sided Border

Left Side

border-left: 4px solid #000000;

Left sided border. 4px is the width and #000000 is the color of the border.

Right Side

border-left: 4px solid #000000;

Left sided border. 4px is the width and #000000 is the color of the border.

Border Top

border-top: 4px solid #000000;

Top Border. 4px is the width and #000000 is the color of the border.

Border Bottom

border-bottom: 4px solid #000000;

Bottom Border. 4px is the width and #000000 is the color of the border.

Border Styles

Dashed Border

CSS Code ::

border: 4px dashed #000000;

Inset Border

CSS Code ::

border: 4px inset #000000;

Double Border

CSS Code ::

border: 4px double #000000;

You can also use different styles for each side.

border-top-style: dotted;    
border-right-style: solid;    
border-bottom-style: dotted;    
border-left-style: solid;

Border Styles with their Names:

You can use any style that you want.

From Editors Desk

We hope that you've completely learned about adding CSS borders. Got a problem? Let us know in the comments. Share this article with your friends and don't forget to subscribe us.

Share This:

Tags:

Beginner's Guide CSS Tricks

• Prevoius
• Next