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.
.png "How to Permanently Delete your Blogger Blog")
.png "How to Permanently Delete your Blogger Blog")
Congratulations: You have successfully deleted your blogger blog.
.png)
.png)
+(2).png)
+(1).png)
.png "How to Change your Blogger Domain Name")
.png "How to Change your Blogger Domain Name")
.png "Add Alt Tag to Images in Blogger")
.png "Add Alt Tag to Images in Blogger")
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
