CSS Border Sides

From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

In the example below we use the four properties above to set the style of each border side:

We can also use the shorthand border-style property to achieve the same result.

The example below gives the same result as the example above:

So, here is how it works:

If the border-style property has four values:

• border-style: dotted solid double dashed; top border is dotted right border is solid bottom border is double left border is dashed

• top border is dotted
• right border is solid
• bottom border is double
• left border is dashed

If the border-style property has three values:

• border-style: dotted solid double; top border is dotted right and left borders are solid bottom border is double

• top border is dotted
• right and left borders are solid
• bottom border is double

If the border-style property has two values:

• border-style: dotted solid; top and bottom borders are dotted right and left borders are solid

• top and bottom borders are dotted
• right and left borders are solid

If the border-style property has one value:

• border-style: dotted; all four borders are dotted

• all four borders are dotted

The border-style property is used in the example above. However, it also works with border-width and border-color .