6 out of 14 rated this helpful - Rate this topic

border-style property

Specifies the style of the left, right, top, and bottom borders of the object.

CSS Backgrounds and Borders Module Level 3, Section 4.2

Syntax

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | window-inset {1,4}

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

Examples

The following examples use the border-style CSS property and the borderStyle scripting property to specify the border style.

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

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

HTML


<head>
<style type="text/css">
td {
	border-style: solid;
	border-width: 0.5cm;
}
.change {
	border-style: groove;
}
</style>
</head>

<body>

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

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

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