Easy Tutorial
❮ Jsref Touppercase Prop Document Inputencoding ❯

Style borderTopWidth Property


Definition and Usage

The borderTopWidth property sets or returns the width of the top border of an element.

Syntax

Set the borderTopWidth property:

Return the borderTopWidth property:

Value Description
thin Defines a thin border.
medium Default. Defines a medium border.
thick Defines a thick border.
length Defines the border width using units like px, cm, etc.
inherit The top border width is inherited from the parent element.

Browser Support

All major browsers support the borderTopWidth 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 width 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.borderTopWidth="thick";
}
</script>
</head>
<body>

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

</body>
</html>

❮ Jsref Touppercase Prop Document Inputencoding ❯