How do you display a border in a CSS syntax?
In CSS syntax, you can control the display of a border through
many different properties depending on your needs. Properties that
control the border include: border, border-top, border-right,
border-bottom, border-left, border-style, border-color,
border-width, border-top-color, border-top-style, border-top-width,
border-right-color, border-right-style, border-right-width,
border-bottom-color, border-bottom-style, border-bottom-width,
border-left-color, border-left-style, and border-left-width. With
these numerous properties you can control each side of the border
differently. The properties of border, border-width, border-style,
border-color, border-top, border-right, border-bottom, and
border-left are all shorthand properties in that you can specify
multiple declarations in one property as opposed to setting each
individual property separately.
Let's say you were wanting to put a 1 pixel, blue topaz, dashed
border around all paragraphs. In your style sheet you would do:
p { border: 1px dashed #0198E1; }
That's the shorthand way to do it, which is the more common way.
The following would result in the same thing but takes up more
space then the above single declaration.
p {
border-top-color: #0198E1;
border-top-width: 1px;
border-top-style: dashed;
border-right-color: #0198E1;
border-right-width: 1px;
border-right-style: dashed;
border-bottom-color: #0198E1;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-left-color: #0198E1;
border-left-width: 1px;
border-left-style: dashed;
}