Border Controls
Each object on your web page has a border. This border may be invisible or it may display in any number of different ways. Here are the stylesheet attributes that you use to control your borders:
- border-collapse can be separate or collapse. It defines whether adjacent borders are to be collapsed into one border or displayed separately.
- border-color specifies the colour that the border displays in. As well as being able to specify a colour you could also specify that it is to inherit the colour or that it is to be transparent (the default). You can also specify up to four separate colours. If one is specified it applies to all four borders. If two are specified they refer to top/bottom and left/right borders respectively. If three are specified they refer to top, left/right, and bottom respectively. If four are specified they apply to top, right, bottom, and left respectively.
- border-spacing defines the space between borders of adjacent table cells (when border-collapse is separate). It is specified as a length.
- border-style can be none (the default), dotted, dashed, solid, double, groove, ridge, inset, or outset. You can also specify up to four separate styles. If one is specified it applies to all four borders. If two are specified they refer to top/bottom and left/right borders respectively. If three are specified they refer to top, left/right, and bottom respectively. If four are specified they apply to top, right, bottom, and left respectively.
- border-width specifies the thickness of the border. It can be thin, medium, thick, or you can specify the actual thickness. You can also specify up to four separate thicknesses. If one is specified it applies to all four borders. If two are specified they refer to top/bottom and left/right borders respectively. If three are specified they refer to top, left/right, and bottom respectively. If four are specified they apply to top, right, bottom, and left respectively.
- border-top, border-right, border-bottom, and border-left can be used to specify the border width, style, and colour of an individual border side instead of using the separate width, style, and colour attributes.
- border can also be used to specify the border width, style, and colour that is to be applied to all four borders.
Attributes can also be individually specified using 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.
Examples
p{border-color: #000000 #cccccc;}
.spec {border-style: inset;}
.left{border-left: medium solid #ffffff;}
.box{border: 2pt dashed #ff0000;}
