CSS: Changing Border Properties

Prior to the usage of CSS , adding borders to your HTML elements was impossible except for creating borders around tables. With CSS, you can add tons of different borders to your web content. This page will go over a few of the most popular properties within 'border' segment.

Creating A Simple CSS Border

In order to create a border, we need to use the 'border-style' property. Below is a list of the border styles you can choose:

border-style: solid; 
border-style: double; 
border-style: groove; 
border-style: dotted; 
border-style: dashed; 
border-style: inset; 
border-style: outset; 
border-style: ridge; 
border-style: hidden;

The end results would be displayed as:

Solid Border
Double Border
Grooved Border
Dotted Border
Dashed Border
Inset Border
Outset Border
Ridged Border
Hidden Border

NOTE: If no border style is applied, the default value is 'hidden'.

 Adding Thickness To Your Borders

As you can see from above, the borders created with the 'border-style' property are all the same. What if you wanted to increase the thickness (width) to your borders? All we need to do is use the 'border-width' property.

The new CSS rule would look something like:

p {border-style: solid; border-width: 10px; }

Output:

This is a solid paragraph with a 10 pixel border

Using The 'border-direction' Property

One of the nice things about CSS is that it allows you to give your borders so many different looks. One interesting way of customizing your borders, is using the 'border-direction' family of properties. The four options are:

border-top
border-bottom
border-left
border-right

p {border-top:  1px solid green ;}
p {border-bottom: 1px dotted ;}
p {border-left: 5px solid ; border-bottom: 5px solid;}

This paragraph has a 1 pixel green border on the top.
This paragraph has a border on the bottom that is a 1 pixel dotted line.
This paragraph has a 5 pixel solid border on the left and bottom.

Shorthand Method Of Creating Borders

Sometimes you don't want to create 3 different rules within CSS to create a simple border. Luckily, there is a shorter method where you can combine multiple properties into just one. In order to do this, you simply have to use the 'border' property. No '-width' or '-style' suffix needed.

p {border: 5px solid green;}

This paragraph has a 5 pixel solid border and is colored green.

Permalink