Border Sides
CSS Border - Individual Sides
You have seen from the preceding pages’ examples that you can designate a distinct border for every side.
Additionally, CSS has attributes for defining the top, right, bottom, and left borders:
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Result:
This is the same outcome as the preceding example:
Example
p {
border-style: dotted solid;
}
Thus, this is how it functions:
Should there be four values for the border-style property:
- border style: solid double dashed
dotted at top, solid at right, double at bottom, dashed at left
- If there are three values for the border-style property:
border-style: dotted solid double; bottom border is double; top border is dotted; borders to the right and left are solid
- If there are two values for the border-style property:
border-style: dotted solid; solid borders on the left and right, dotted borders on the top and bottom
- If there is just one value for the border-style property:
Dotted boundaries; each of the four borders is 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 aforementioned example makes use of the border-style property. It does, however, also function with border-color and border-width.
