Easy Tutorial
❮ Event Onwaiting Prop Style Outlineoffset ❯

Style borderBottom Property


Definition and Usage

The borderBottom property sets or returns the three individual bottom border properties in a shorthand form.

With this property, you can set/return:

Syntax

Set the borderBottom property:

Return the borderBottom property:

Note: The borderBottom property has no default value.

Parameter Description
width Sets the width of the bottom border.
style Sets the style of the bottom border.
color Sets the color of the bottom border.

Browser Support

All major browsers support the borderBottom property.


Example

Change the width, style, and color of the bottom border:

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

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Modify Bottom Border</button>

</body>
</html>

❮ Event Onwaiting Prop Style Outlineoffset ❯