Border Properties
These properties control the color, style, and width of an element’s borders. Each side can be styled independently. Because there are so many options, the border properties have a large number of shorthand versions. For a border to display, you must specify at least the border-style property, or its equivalent in one of the shorthand properties. See Chapter 5 for a detailed description.
border-color
- Accepted values:
- One, two, three, or four color values or the keyword
transparent - Default:
- The color of the text in the current element
- Inherited:
- No
Shorthand property that lets you specify the color of all four borders in a single declaration. Accepts a space-separated list of one, two, three, or four values, which are applied as follows:
- One value: Applies equally to all four sides.
- Two values: The first one applies to the top and bottom, and the second one to the left and right.
- Three values: The first one applies to the top, the second one to the left and right, and the third one to the bottom.
- Four values: The values are applied in clockwise order starting from the top.
border-style
- Accepted values:
- Up to four of the following keywords:
dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid - Default:
none- Inherited:
- No
Shorthand property that lets you specify the style of all four borders in a single declaration. Accepts a space-separated list of one, two, three, or four values. See border-color for an explanation of how the values are applied. The hidden keyword applies only to table borders.
Examples of different border styles
border-top, border-right, border-bottom, border-left
- Default:
- See individual properties
- Inherited:
- No
Shorthand properties that let you specify the color, style, and width of the selected border in a single declaration. The values can be specified in any order. If color and width are omitted, a medium border using the same color as the current element’s text is used. For the border to display, a style must be specified.
border-top-color, border-right-color, border-bottom-color, border-left-color
- Accepted values:
- A color value or the keyword
transparent - Default:
- The color of the text in the current element
- Inherited:
- No
Individual property that specifies the color of the selected border.
border-top-style, border-right-style, border-bottom-style, border-left-style
- Accepted values:
dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid- Default:
none- Inherited:
- No
Individual property that specifies the style of the selected border. The hidden keyword applies only to table borders.
border-top-width, border-right-width, border-bottom-width, border-left-width
- Accepted values:
- A percentage or size with a unit of measurement
- Default:
medium- Inherited:
- No
Individual property that sets the width of the selected border. Border width is added to the overall width of an element. Negative values are not permitted.
border-width
- Accepted values:
- Percentages or values with a unit of measurement
- Default:
medium- Inherited:
- No
Shorthand property that specifies the width of all four borders in a single declaration. Accepts a space-separated list of one, two, three, or four values. See border-color for an explanation of how the values are applied.
border
- Default:
- See individual properties
- Inherited:
- No
Shorthand property that lets you set the color, style, and width of all four borders in a single declaration. All sides must have the same values, which can be in any order. For the borders to display, you must specify at least one of the styles accepted by border-style.
To style borders individually, use the individual border properties or the border-color, border-style, and border-width shorthand properties.