The CSS Border Attribute

This is a shorthand way to assign the color, style and width attributes of borders drawn around HTML elements. The sub-attributes are as follows

• border-color:value - where value can be a safe CSS color name or a hexadecimal value as discussed here.
• border-style:value - where value is one of none, dotted, dashed, solid, double, groove, ridge, inset or outset. It should be noted that not all browsers do a good job of rendering some of the more exotic settings, such as groove and ridge.
• border-width:value - determines the width of the border. Width can be specified using any of the legal CSS dimension units discussed here. It is vital to understand how border widths contribute to the overall size of an HTML element. Look at our note on the CSS Box Model.

A shorthand border assignment bears the form

CSS allows the top, left, right and bottom borders to be styled individually. To do this we use assignments of the form border-x-y:value where x is one of top, left, right or bottom and y is one of color, style or width. Assignments bearing the form border-y:value where y is one of color, style or width are also legal. In practice you may find it convenient to first style an entire border using the shorthand border attribute and then selectively alter the border sides that should appear different.

This is not an inherited property - i.e. in a child element, if not assigned, it takes the default value rather than the corresponding value in its parent container.

Each of these attributes can also be assigned the setting inherit which causes them to pick up their value from their parent element.

The ability to assign individual element borders can combined with CSS Floats to easily generate a non-graphical 7-segment, claculator-style, display. The use of such a display in a simple non-graphical CAPTCHA is demonstrated here.