From the examples provided on earlier pages, you’ve observed the ability to define distinct borders for each side.
In CSS, there exist individual properties for specifying each border direction (top, right, bottom, and left).
Example
| p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } |
Outcome:
The example provided yields an identical outcome to this one:
Example
| p { border-style: dotted solid; } |
Here’s how it functions:
If the border-style property has four values:
The top border is dotted.
The right border is solid.
The bottom border is double.
The left border is dashed.
If the border-style property has three values:
The top border is dotted.
The right and left borders are solid.
The bottom border is double.
If the border-style property has two values:
The top and bottom borders are dotted.
The right and left borders are solid.
If the border-style property has one value:
All four borders are dotted.
Example
| /* Four values */ p { border-style: dotted solid double dashed; } /* Three values */ p { border-style: dotted solid double; } /* Two values */ p { border-style: dotted solid; } /* One value */ p { border-style: dotted; } |
| The example above demonstrates the usage of the border-style property. However, it also functions similarly with border-width and border-color. |
