Going The Extra Mile

Borders

Border

Syntax: border: <value>
Possible Values: <border-width> || <border-style> || <color>
Initial Value: Not defined
Applies to: All elements
Inherited: No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }  
A:link    { border: solid blue }  
A:visited { border: thin dotted #800080 }  
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

 

Top Border Width

Syntax: border-top-width: <value>
Possible Values: thin | medium | thick | <length>
Initial Value: medium
Applies to: All elements
Inherited: No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Right Border Width

Syntax: border-right-width: <value>
Possible Values: thin | medium | thick | <length>
Initial Value: medium
Applies to: All elements
Inherited: No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Bottom Border Width

Syntax: border-bottom-width: <value>
Possible Values: thin | medium | thick | <length>
Initial Value: medium
Applies to: All elements
Inherited: No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Left Border Width

Syntax: border-left-width: <value>
Possible Values: thin | medium | thick | <length>
Initial Value: medium
Applies to: All elements
Inherited: No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Border Width

Syntax: border-width: <value>
Possible Values: [ thin | medium | thick | <length> ]{1,4}
Initial Value: Not defined
Applies to: All elements
Inherited: No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Border Color

Syntax: border-color: <value>
Possible Values: <color>{1,4}
Initial Value: The value of the color property
Applies to: All elements
Inherited: No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Border Style

Syntax: border-style: <value>
Possible Values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: none
Applies to: All elements
Inherited: No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Top Border

Syntax: border-top: <value>
Possible Values: <border-top-width> || <border-style> || <color>
Initial Value: Not defined
Applies to: All elements
Inherited: No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Right Border

Syntax: border-right: <value>
Possible Values: <border-right-width> || <border-style> || <color>
Initial Value: Not defined
Applies to: All elements
Inherited: No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Bottom Border

Syntax: border-bottom: <value>
Possible Values: <border-bottom-width> || <border-style> || <color>
Initial Value: Not defined
Applies to: All elements
Inherited: No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Left Border

Syntax: border-left: <value>
Possible Values: <border-left-width> || <border-style> || <color>
Initial Value: Not defined
Applies to: All elements
Inherited: No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Homework

 

Implementation