1 out of 1 rated this helpful - Rate this topic

border-top-style property

Specifies the style of the top border of the object.

CSS Backgrounds and Borders Module Level 3, Section 4.2

Syntax

Property values

none: Initial value. Border is not drawn, regardless of any border-width.
hidden: Internet Explorer 8 and later. Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
dotted: Border is a dotted line.
dashed: Border is a dashed line.
solid: Border is a solid line.
double: Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border.
groove: 3-D groove is drawn in colors based on the value.
ridge: 3-D ridge is drawn in colors based on the value.
inset: 3-D inset is drawn in colors based on the value.
outset: 3-D outset is drawn in colors based on the value.
window-inset: Same as inset with a thin outside border.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	none

Standards information

CSS Backgrounds and Borders Module Level 3, Section 4.2

Remarks

An border-width greater than zero must be set for the border-top-style attribute to render.

Examples

The following examples use the border-top-style CSS property and the borderTopStyle scripting property to specify the style of the top border.

This example uses a call to an embedded (global) style sheet to change the style of the top border from solid to groove when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/border-top-style.htm

HTML


<head>
<style>
td {
  border-top-style: solid;
  border-width: 0.3cm;
}
.change {
  border-top-style: groove;
}
</style>
</head>

<body>

<table>
  <tr>
    <td onmouseout="this.className=''" onmouseover="this.className='change'">
    <img alt="sphere" src="sphere.jpg"> </td>
  </tr>
</table>

This example uses inline scripting to change the style of the top border to groove when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/borderTopStyle.htm