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-top-color | Next Style: border-top-width |


border-top-style

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

Support:

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

See Also:

border-style, border-bottom-style, border-left-style, border-right-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
The object isn't floated, so text doesn't flow around it.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS1 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 4 and later

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-top-width: thick; border-top-style: double">
Double top border
<P STYLE="border-top-width: thick; border-top-style: groove">
Groove top border
<P STYLE="border-top-width: thick; border-top-style: inset">
Inset top border
<P STYLE="border-top-width: thick; border-top-style: outset">
Outset top border
<P STYLE="border-top-width: thick; border-top-style: ridge">
Ridge top border
<P STYLE="border-top-width: thick; border-top-style: solid">
Solid top border
How It Looks:

Double top border

Groove top border

Inset top border

Outset top border

Ridge top border

Solid top border


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