How to set all the border bottom properties in one declaration in JavaScript DOM?

To set all border bottom properties in one declaration using JavaScript DOM, use the borderBottom property. This property allows you to simultaneously set the border-bottom-width, border-bottom-style, and border-bottom-color in a single statement.

Syntax

element.style.borderBottom = "width style color";

Parameters

The borderBottom property accepts a string value containing three space-separated components:

• width: Border thickness (e.g., "thin", "medium", "thick", "2px", "5px")
• style: Border style (e.g., "solid", "dashed", "dotted", "double")
• color: Border color (e.g., "red", "#ff0000", "rgb(255,0,0)")

Example

Here's how to set border bottom properties using JavaScript:

   
      
   
   
      Set Border Bottom
      
         
Demo Text
         
Demo Text
      
      
   

Multiple Examples

You can set different border bottom styles:

   
      
   
   
      Thick Double Green
      Medium Dotted Blue
      Thin Solid Orange
      
      
   

Key Points

• All three values (width, style, color) can be set in one declaration
• The order of values matters: width, style, then color
• You can omit any value to use the default
• Individual properties can still be set separately if needed

Conclusion

The borderBottom property provides an efficient way to set all bottom border properties at once. Use the format "width style color" to define comprehensive border bottom styling in JavaScript DOM manipulation.