Draw Your Borders - Boxing with CSS, Part II: No Margin For Error - HTML with Style

Boxing with CSS, Part II: No Margin For Error

Draw Your Borders

There are many border properties in CSS, but most of them are just different ways to do the same thing. The basic fact you need to remember is that there are three characteristics of borders to be set: border color, border style and border width. Each of these characteristics can be different for each of the four sides of the box. Hence we have three properties for each of four sides, which makes a total of twelve properties for each element. In addition, CSS offers several shorthand properties that allow you both to set each characteristic for all sides or all characteristics for one side, and a shorthand property that sets all characteristics for all sides at once. That's a total of twenty properties. However, they're all pretty simple once you get the hang of them.

Border Width Properties

Property:	border-top-width, border-left-width, border-bottom-width, border-right-width
Accepted values:	A length or one of thin, medium or thick
Initial value:	0
Applies to:	All Elements
Inherited:	No

The border width properties set the width of the border on each of the four sides of the box. In addition to a length value, they accept the three values thin, medium and thick, which denote a thin, medium, or thick border, with the specific meaning of these values depending on the user agent.

Border Color Properties

Property:	border-top-color, border-left-color, border-bottom-color, border-right-color
Accepted values:	A color value
Initial value:	The value of the color property.
Applies to:	All Elements
Inherited:	No

The border color properties set the color of the border. If they are not specified, the default color used for the border is the color of the element itself, as specified (or inherited) by the color property.

Border Style Properties

Property:	border-top-style, border-left-style, border-bottom-style, border-right-style
Accepted values:	One of the border styles
Initial value:	none
Applies to:	All Elements
Inherited:	No

The border style properties set the style of a border. The border styles stated in the specification are none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Of these, none and hidden are special in that they specify that no border should be drawn. They differ only when they apply to table cells, and since we haven't talked about tables yet, we'll discuss this difference when I introduce tables in a later tutorial.

The rest of the border styles specify a certain rendering style for the border. Neither browser supports dotted and dashed borders, rendering both as solid. Navigator renders the rest as they are supposed to be rendered, and Explorer renders them slightly strangely but with the same overall aesthetic effect.

The above twelve properties are usually expressed using some of the more convenient shorthand properties.

URL: https://www.webreference.com/html/tutorial10/
Created: Dec 2, 1998
Revised: Jan 27, 1999