One value, like: p {border-width: thick} - all four borders will be thick
Two values, like: p {border-width: thick thin} - the top and bottom border will be thick, left and right border will be thin
Three values, like: p {border-width: thick thin medium}- the top border will be thick, left and right border will be thin, bottom border will be medium
Four values, like: p {border-width: thick thin medium 10px} - the top border will be thick, right border will be thin, bottom border will be medium, left border will be 10px

Syntax

Set the borderWidth property:

Object.style.borderWidth="thin|medium|thick|length|inherit"

Return the borderWidth property:

Object.style.borderWidth

Value	Description
thin	Defines a thin border
medium	Defines a medium border. This is default
thick	Defines a thick border
length	The width of the border in length units
inherit	The width of the border is inherited from the parent element

Browser Support

The borderWidth property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Example

Change the width of the four borders:

<html>
<head>
<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()">Change width of the four borders</button>

</body>
</html>

Try it yourself »

Style Object