Easy Tutorial
❮ Jsref Keys Prop Style Cssfloat ❯

Style borderWidth Property


Definition and Usage

The borderWidth property sets or returns the width of an element's border.

This property can use from 1 to 4 widths:

Syntax

Set the borderWidth property:

Return the borderWidth property:

Value Description
thin Defines a thin border.
medium Default. Defines a medium border.
thick Defines a thick border.
length Allows you to define the width of the border.
inherit The border width is inherited from the parent element.

Browser Support

All major browsers support the borderWidth 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 all four borders:

<!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.borderWidth="thick thin";
}
</script>
</head>
<body>

<div id="ex1">This is some text</div>
<br>
<button type="button" onclick="displayResult()">Modify the width of all four borders</button>

</body>
</html>

❮ Jsref Keys Prop Style Cssfloat ❯