CSS:border-bottom-style

From MDC

« CSS Reference

[edit] Summary

border-bottom-style sets the line style of the bottom border of a box.

• Initial value: none
• Applies to: all elements
• Inherited: no
• Percentages: N/A
• Media: visual
• Computed value: as specified

[edit] Syntax

border-bottom-style: <border-style> | inherit

[edit] <border-style> Values

none 

No border.

hidden 

Same as 'none', except in terms of border conflict resolution for table elements.

dotted 

Series of dots.

dashed 

Series of short dashes or line segments.

solid 

Single, straight, solid line.

double 

Two straight lines that add up to the pixel amount defined as border-width.

groove 

Carved effect.

ridge 

Opposite of 'groove'. The border appears 3D (coming out).

inset 

Makes the box appear embedded.

outset 

Opposite of 'inset'. Makes the box appear 3D (embossed).

[edit] Related properties

• border-left-style
• border-right-style
• border-top-style
• border-style

[edit] Examples

View Live Examples

element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}

[edit] Notes

Unless a border-style value is set, your border will not appear because the default value is set to 'none.'

[edit] Specifications

• CSS 2.1
• CSS 3

[edit] Browser Compatibility

[edit] See Also

border-bottom-style, border-bottom, border-bottom-color, border-bottom-width,