Loading lesson path
Formula
CSS Border - Individual SidesFrom 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):
Formula
border - top - style border - right - style border - bottom - style border - left - styleIn the example below we use the four properties above to set the style of each border side:
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}Formula
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:
Example p {
border-style: dotted solid;
}So, here is how it works:
Formula
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
Formula
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
Formula
If the border - style property has two values:border-style: dotted solid;top and bottom borders are dotted right and left borders are solid
Formula
If the border - style property has one value:border-style: dotted;all four borders are dotted
/* 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;
}Formula
The border - style property is used in the example above. However, it also works with border - width and border - color.