Setting Border Width for All Sides

You can set the border width for all sides of an element using the border-width property. This property accepts one, two, three, or four values to specify the width of the border for the top, right, bottom, and left sides, respectively.

Syntax:

/* Set border width for all sides */
.example {
border: 2px; /* 2 pixels for all sides */
}

Example:

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Border Width</title>

    <style>
        /* Set border width for all sides */
        .GFG {
            
            /* 2 pixels width for all sides */
            border: 2px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        Welcome to w3wiki
    </div>
</body>

</html>

Output:

How to Set Border Width in CSS?

The CSS border-width property is used to set the border of an element. This property allows you to specify the width of the border for all four sides of an element or individually for each side. Here, we will cover all possible approaches with detailed explanations and code examples.

Table of Content

  • Setting Border Width for All Sides
  • Setting Border Width for Individual Sides
  • Setting Border Width using Shorthand

Similar Reads

Setting Border Width for All Sides

You can set the border width for all sides of an element using the border-width property. This property accepts one, two, three, or four values to specify the width of the border for the top, right, bottom, and left sides, respectively....

Setting Border Width for Individual Sides

You can also set the border width for individual sides of an element using the border-top-width, border-right-width, border-bottom-width, and border-left-width properties....

Setting Border Width using Shorthand

The border-width property can also be used as a shorthand to set the border width for all sides in a single declaration. You can specify one, two, three, or four values to set the width for the top, right, bottom, and left sides, respectively....

Contact Us