border-bottom Attribute

{ border-bottom: <border-bottom-width> || <border-style> || <color>}

This attribute specifies the bottom border. Supported on block and replaced elements only.

This attribute is not inherited.

Settings

These properties set the border of an element: the 'border' property sets the border for all four sides while the other properties only set their respective side.

The border is drawn in the image pointed to by the URL. If no URL is specified, or when the image is not available, the color value is used.

If an image is found through the URL, it will be used as a texture (i.e. repeated) to draw the border. The <color> value, if specified, is used:

• to fill transparent regions of an image
  
  
• while loading the image from the URL
  
  
• if no URL is specified

If no <color> value is specified, the value of the 'color' property will take its place:

P {

color: black;

background: white;

border: solid;

}

In the above example, the border will be a solid black line.

<border-width> Value: [ thin | medium | thick | <length> ]
Initial: medium

The keyword widths are constant throughout a document:

h3 { border: solid thick red }

P { border: solid thick blue }

In the example above, 'h3' and 'P' elements will have the same border width regardless of font size. To do relative width, the 'em' unit can be used:

h3 { border: solid 0.5em }

<border-style> Value: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
Initial: none

The following border styles are defined:

none

no border is drawn (regardless of any <border-width>)

dotted

the border is a dotted line drawn on top of the background of the element

dashed

the border is a dashed line drawn on top of the background of the element

solid

the border is a solid line

double

the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.

groove

a 3D groove is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>

ridge

a 3D ridge is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>

inset

a 3D inset is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>

outset

a 3D outset is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>