How to set border width using jQuery ?

Last Updated : 15 May, 2023

In this article, we will see how to set the border width using jQuery. To set the border width using jQuery, we will use css() method. This method is used to change the style property of the selected element.

Syntax:

$(selector).css(property, value)
// Or
$(selector).css({property: value, property: value, ...})

Where –

property is the name of the CSS property, and value is the corresponding property value.

Example 1: In this example, we will set the border-width to 5px using css() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to set border width using jQuery? 
    </title> 
  
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
        
        .GFG { 
            width: 300px; 
            margin: auto; 
            border: 1px solid black; 
            padding: 30px 20px; 
        } 
  
        button { 
            margin-top: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to set border width using jQuery? 
    </h3> 
  
    <p class="GFG">Welcome to GeeksforGeeks</p> 
  
    <button onclick="Func()">Set Border Width</button> 
  
    <script> 
        function Func() { 
            $('.GFG').css('border-width', '5px'); 
        } 
    </script> 
</body> 
</html>

Output:

Example 2: In this example, we will add multiple border styles using jQuery css() method in property, value format.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to set border width using jQuery? 
    </title> 
  
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
        .GFG { 
            width: 300px; 
            margin: auto; 
            padding: 30px 20px; 
        } 
  
        button { 
            margin-top: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to set border width using jQuery? 
    </h3> 
  
    <p class="GFG">Welcome to GeeksforGeeks</p> 
  
    <button onclick="Func()">Set Border Width</button> 
  
    <script> 
        function Func() { 
            $('.GFG').css({ 
                "border-width": "5px",  
                "border-style": "solid",  
                "border-color": "green" 
            }); 
        } 
    </script> 
</body> 
</html>