CSS Border - Individual 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):

Example

Output :

The example above gives the same result as this:

Example

Output :

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 and left borders are 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

If the border-style property has two values:

• border-style: dotted solid;

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

If the border-style property has one value:

• border-style: dotted;

  • top border is dotted

Example

Output :

---