CSS- Borders Tutorial


CSS


In this article, we will show you how to add borders to objects in a web page with CSS and also how you can adjust the thickness of the border and change the border to a variety of styles, such as solid, dotted, dashed, etc.

Borders are an integral part of web pages. Many elements, such as vertical menus, horizontal menus, newsletter sign-ups, etc. use borders to surround its text and to isolate it from other aspects on a page.

So knowing how to style borders is very important in web design that can be utilized for many different elements on the web.

CSS allows us to make add these borders and style them for their type (solid, dotted, dashed, etc.), their color, and their thickness.

So let's go over now how to do this.

HTML

Before we add the border in CSS, first let's create the the content we're going to put a border around. (Or else, we'll have no element to style with a border.)

To create an element or block in HTML, we create a div tag and give it a name, either a class or ID, so that we can later style it in CSS.

So the HTML code we code will be:

This creates the following below:

Sign up for Our Newsletter



This above is the div tag without any borders or background color surrounding it. It looks plain. You can hardly tell that it's its own section. There are borders to differentiate or separate it from the surrounding material. This above div tag would look much better and organized on the page if a border separated it from all other content.

Let's look at the above newsletter signup with a border and background color surrounding it, shown below:

Sign up for Our Newsletter



The border (along with background color) now makes the newsletter signup stand out more and seem like its own separate section. This is one of the key importance of adding CSS style elements such as borders.

So how do we add borders?

CSS Coding

So how do we add a border with CSS?

Since we're styling the HTML div tag that has the id newsletter, we add the following lines to our CSS page.

How to Make a Solid Border

To make a solid border, we add the following lines of CSS code to our CSS page. If we are styling a div tag called Demonstrations, our lines of code would be:

This line of code places a solid rectangular border on all four sides of the content, such that it looks like this div tag below:

Solid Border



How to Make a Dotted Border

To make a dotted border, we add the following lines of CSS code to our CSS page.

This line of code places a dotted rectangular border on all four sides of the content, such that it looks like this div tag below:

Dotted Border



How to Make a Dashed Border

To make a dashed border, we add the following lines of CSS code to our CSS page.

This line of code places a dashed rectangular border on all four sides of the content, such that it looks like this div tag below:

Dashed Border




Borders on Specific Sides

All of the above code puts borders on all four sides of the content it surrounds. However, CSS also has coding so that you can put a border on a specific side or sides only. For example, say you only wanted borders on the bottom and and top only, but not on the sides (left and right), you can do this in CSS.

CSS specifies the 4 sides of a border by the following attributes:

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

You can substitute solid for any of the various other substitutes.

You also can specify different styles for each one. You can have any various combination of solid, dotted, or dashed borders. The code below has 2 solid borders on the top and bottom and dashed borders on the left and right.

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

This produces the following div tag:

Solid and Dashed Border



Note: The border-X-style: attribute can have between 1 to 4 values.
4 values- If the border-X-style has 4 values, all 4 borders are represented.
3 values- If the border-x-style has 3 values, the 1st value is the top value, the 2nd is the left and right value, and the 3rd is the bottom value.
2 values- If the border-x-style has 2 values, the 1st value is the top and bottom value, and the 2nd value is the left and right border values.
1 value- If the border-x-style has 1 value, the value represents the top, bottom, left and right borders.

How to Give Color to the Border

You can color all the borders in a div tag the same color or you can give each border individual colors.

To color all borders the same color, use the following CSS code. This colors all of the borders the color you specify for this attribute:

This would produce:

Green Border



To give colors to each of the individual borders, the following attributes are used:

border-top-color:green;
border-bottom-color:yellow;
border-left-color:red;
border-right-color:gray;

With these above attributes, you can give each of the borders different colors.

How to Change the Thickness of the Border

To change the thickness of the border, we use the CSS attribute border-width to vary the thickness. The border-width attribute can take any value from 1px to any amount.

All the borders above have a thickness of 1 px. Look at the following border below which has a thickness of 5px.

Thick Border



The code which this border above contains is:

To specify the width of each individual border, the following attributes are used:

border-top-width:1px;
border-bottom-width:2px;
border-left-width:3px;
border-right-width:4px;

Shorthand Way of Writing

You can use a shorthand approach and just use the attribute border and specify the width, type, and color.
So, for example, to create an element with a border with a width of 1px, solid, and red, the lines of code would be:

And there are attributes which use this shorthand for each individual border:

border-top: 1px solid black;
border-bottom:2px dotted red;
border-left:3px dashed yellow;
border-right:4px solid ;

With these above attributes, one can specify all of the values for an individual border with one line.

Table of All Border Attributes

Attribute Function
border-top-style This selects the style of the top border.
border-top-width This selects the width of the top border.
border-top-color This selects the color of the top border.
border-bottom-style This selects the style of the bottom border.
border-bottom-width This selects the width of the bottom border.
border-bottom-color This selects the color of the bottom border.
border-left-style This selects the style of the left border.
border-left-width This selects the width of the left border.
border-left-color This selects the color of the left border.
border-right-style This selects the style of the right border.
border-right-width This selects the width of the right border.
border-right-color This selects the color of the right border.
border-style This selects the style of all 4 borders.
border-width This selects the width of all 4 borders.
border-color This selects the color of all 4 borders.
border This can select style, width and color of all 4 borders in one line.
border-top This can select style, width, and color of the top border in one line.
border-bottom This can select style, width, and color of the bottom border in one line.
border-left This can select style, width, and color of the left border in one line.
border-right This can select style, width, and color of the right border in one line.




HTML Comment Box is loading comments...