Easy Tutorial
❮ Jsref Setminutes Met Select Remove ❯

Style borderTopStyle Property


Definition and Usage

The borderTopStyle property sets or returns the style of an element's top border.

Syntax

Set the borderTopStyle property:

Return the borderTopStyle property:

Value Description
none Default. Defines no border.
hidden Same as "none". Except for table elements, where hidden is used to resolve border conflicts.
dotted Defines a dotted border.
dashed Defines a dashed border.
solid Defines a solid border.
double Defines a double border. The width of the double line is equal to the value of border-width.
groove Defines a 3D grooved border. The effect depends on the border-color value.
ridge Defines a 3D ridged border. The effect depends on the border-color value.
inset Defines a 3D inset border. The effect depends on the border-color value.
outset Defines a 3D outset border. The effect depends on the border-color value.
inherit The style of the top border is inherited from the parent element.

Browser Support

All major browsers support the borderTopStyle property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if the !DOCTYPE is specified. IE9 supports "inherit".


Example

Change the style of the top border:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
#ex1{
    border: 1px solid #FF0000;
}
</style>
<script>
function displayResult(){
    document.getElementById("ex1").style.borderTopStyle="dotted";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Modify the style of the top border</button>

</body>
</html>

❮ Jsref Setminutes Met Select Remove ❯