Don't Miss

How to Add CSS Borders in Blogger - Complete Guide

By Zohaib Liaqat - 7 Comments
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.

7 comments to ''How to Add CSS Borders in Blogger - Complete Guide"

ADD COMMENT
  1. Thanks for the good words! Really appreciated. Great post. I’ve been commenting a lot on a few blogs recently, but I hadn’t thought about my approach until you brought it up. school branding uk

    ReplyDelete
  2. Presently read proceed with full post and give an alternate look to your everything blog entries by adding a fringe to blog entry. Presently observe two distinct strategies to show an outskirt around a blog entry. pay someone to write my paper cheap

    ReplyDelete
  3. Heya just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same results. web design new york

    ReplyDelete
  4. Thanks , I have recently been looking for info approximately this subject for a long time and yours is the best I’ve discovered till now. But, what about the conclusion? Are you sure concerning the source? website designer nyc

    ReplyDelete
  5. I used to be more than happy to seek out this internet-site.. I dont even know how I ended up here, but I thought this post was great. A lot more A rise in Agreeable. brand identity design agency

    ReplyDelete
  6. Greetings! This is my first comment here so I just wanted to give a quick shout out and tell you I genuinely enjoy reading through your blog posts. Can you recommend any other blogs/websites/forums that deal with the same topics? Thank you so much! branding agencies in san francisco

    ReplyDelete