1 out of 3 rated this helpful - Rate this topic

border-top property

Specifies the properties of the top border of the object.

CSS Backgrounds and Borders Module Level 3, Section 4.4

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 ToAll elements
Mediavisual
Inheritedno
Initial Value(see individual properties)

Standards information

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

Did you find this helpful?
(1500 characters remaining)

Community Additions

ADD
© 2013 Microsoft. All rights reserved.