The cover of The Complete Idiot's Guide to Create a Web Page The Complete Idiot's Style Sheets Reference

| Index | Current Category: Borders |
| Previous Style: border-bottom-color | Next Style: border-bottom-width |


border-bottom-style

Specifies the bottom border style of the element's box.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later

See Also:

border-border-left-style, border-right-style, style, border-top-style

Possible Values:

dashed
Renders the border as a series of dashes.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

dotted
Renders the border as a series of dots.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

double
Renders the border as a double line.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

groove
Renders the border as a V-shaped line that appears to be etched into the page

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

hidden
Doesn't display a border.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

Notes:
  • This value is the same as none. It's used within a table that has separated borders.

inset
Renders the border as a line that appears to be sunken into the page.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

none
Doesn't display a border.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

outset
Renders the border as a line that appears to be raised from the page.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

ridge
Renders the border as a V-shaped line that appears to be coming out of the page.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

solid
Renders the border as a solid line.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

Example:
<P STYLE="border-bottom-width: thick; border-bottom-style: double">
Double bottom border
<P STYLE="border-bottom-width: thick; border-bottom-style: groove">
Groove bottom border
<P STYLE="border-bottom-width: thick; border-bottom-style: inset">
Inset bottom border
<P STYLE="border-bottom-width: thick; border-bottom-style: outset">
Outset bottom border
<P STYLE="border-bottom-width: thick; border-bottom-style: ridge">
Ridge bottom border
<P STYLE="border-bottom-width: thick; border-bottom-style: solid">
Solid bottom border
How It Looks:

Double bottom border

Groove bottom border

Inset bottom border

Outset bottom border

Ridge bottom border

Solid bottom border


| Index | Current Category: Borders |
| Previous Style: border-bottom-color | Next Style: border-bottom-width |