The border-width property sets the width of an element’s borders. An element must have a border before you can change the width.

/* sets all 4 borders */
div {
    border-width: 4px;
}

/* sets the top and bottom border to thick, and the left and right borders to thin */
div {
    border-width: thick thin;
}

/* sets the top border to thin, the two side borders to medium, and the bottom border to 8px */
div {
    border-width: thin medium 8px;
}

/* sets the top border to thin, the right side border to medium, the bottom border to 8px, and the left side border to 12px */
div {
    border-width: thin medium 8px 4px;
}

Default value	none
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
medium	Specifies a medium border (default)
thin	Specifies a thin border
thick	Specifies a thick border
length	Allows you to define the thickness of the border in pixels
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.borderWidth = 'thin 4px';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.borderWidth = 'thin 4px';
}
</script>

---