The border-bottom, border-top, border-left and border-right CSS properties set the width, color and style of one of the four borders of an element. Consider using these properties to set width color and style at the same time. You'd probably prefer border-bottom-width, border-bottom-color or border-bottom-width when setting only one or two of width, color and style. As with any shorthand, values not provided are reset to initial and not preserved or inherited.
border-bottom: 1px solid green; border-right: 2px dashed; /* same color as text */ border-left: solid blue; /* browser uses a medium width */
The style value has to be set for the border to be visible, eg.
border-right: 1px; won't do it.
Browser Support: Full
The border shorthand properties are normally given all their three values: width, style and color. This is because values not given are reset to initial instead of being preserved. To change one of the values while preserving the rest use the longhand properties: border-bottom-width, border-bottom-style and border-bottom-color.
The borders are drawn between the padding and the margin areas.
The border shorthands are also longhands. The border property is sort of a shorthand for border-top, border-right, border-bottom and border-left. It's not exactly a shorthand because it doesn't allow different values for each border. At the same time, each border property has its longhand properties. For border-bottom these are:
I'm sure you can guess what the rest are and what they do. As you can see, there are quite a bit of border properties.
The following are the available border line styles:
border-bottom vs underline
In the case of inline elements, the bottom and top border produce a similar result to
text-decoration: underline and
overline. It is somewhat common to use border-bottom instead of underlining links or empasized text because it gives more control and a consistent behaviour accross browsers. The border can be moved (by setting a padding-bottom), colored and styled (for a dashed line, for example). In contrast, underlined text is always the same color of the text. CSS3 does add some properties to style the line, still with few support.