CSS border-top, border-right, border-bottom, border-left

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.

pxptemvw...#rgbahsla...
border-bottom: width style color
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.

The border width can't be made relative to the parent's width/height. The default medium width is implementation specific. Always give a length as width for consistent behaviour. Use the border property to style the four borders. border doesn't allow different values for each border.

Browser Support: Full

Usage

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.

.example {
padding: 30px; margin: 30px; border-top: 5px dashed hsl(0,50%,50%); border-right: 20px solid green; border-bottom: 10px solid rgb(240,120,30); border-left: 15px dotted #dddd40;
}

The Longhands

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.

Line Styles

The following are the available border line styles:

dotted
dashed
solid
double
groove
ridge
inset
outset

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.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>