border-top property
Specifies the properties of the top border of the object.
![]() |
Syntax
border-top:
<border-top-width>
||
<border-top-style>
||
<border-top-color>
Property values
One or more of the following space-delimited values:
- border-top-width
-
Any of the range of width values available to the border-top-width property.
- border-top-style
-
Any of the range of style values available to the border-top-style property.
- border-top-color
-
Any of the range of color values available to the border-top-color property.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | (see individual properties) |
Standards information
- CSS Backgrounds and Borders Module Level 3, Section 4.4
Remarks
The border-top property is a shorthand property that sets the width, color, and style values for the top border of an object.
All individual border properties not set by the shorthand border-top property are set to their initial values. For example, the initial value for width is "medium".
If a color is not specified, the text color is used.
For more information about supported colors, see the Color Table.
Examples
The following examples use the border-top CSS property and the borderTop scripting property to specify the composite properties.
This example uses a call to an embedded (global) style sheet to change the attributes of the top border when an onmouseover event occurs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/border-top.htm
<head> <style> td { border-top: 0.5cm solid yellow; } .change { border-top: 0.5cm groove pink; } </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 top border when an onmouseover event occurs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/borderTop.htm
<td onmouseover="this.style.borderTop='0.3cm groove yellow'">
See also
- CSSStyleDeclaration
- currentStyle
- defaults
- runtimeStyle
- style
- Reference
- border
- Other Resources
- CSS Enhancements in Internet Explorer 6
Send comments about this topic to Microsoft
Build date: 11/29/2012
