CSS Examples

How to Set a Double Border using CSS

In this example, we will learn how to set a double border using CSS. We can use the border-width, border-style and border-color property to set the border in an element or we can use border as a shorthand property for these properties. border-style: double is used to set the double border.

Prerequisites

CSS border-width property
CSS border-style property
CSS border-color property
CSS border property

Example

HTML

    <div class="main">
       Hello!
    </div>

CSS

        .main{
            border-width: 5px;
            border-style: double;
            border-color: black;
        }

Output

Here, the border-style: double sets the double border, border-width: 5px sets the width of the border to 5px, and border-color: black sets the black color of the border. We can also use the shorthand property as border: 5px double black. The output will be the same.

Conclusion

In this example, we learned how to set a double border using CSS. We used the border-style: double to set the double border.