How To Add Border In HTML?

Last Updated : 04 Sep, 2024

Adding Borders to HTML elements is a common way to enhance the presentation and layout of web pages. Borders can be added to divs, paragraphs, images, and tables to separate or highlight content visually. CSS can provide several properties to customize the borders, such as color, style, and width.

There are multiple ways to add the borders in the HTML using CSS:

Table of Content

Using the border Property
Using the Individual Border Properties
Adding the Borders to Specific Sides
Using the outline Property
Using the Classes for Reusable Borders
Applying the Border through Inline CSS

1. Using the border Property

The border property in CSS is the shorthand way to set the border width, style, and color in one line. This property can be applied to most HTML elements and is used to quickly define the borders of the element. The border will wrap around the content of the element, providing a visual boundary.

Syntax:

border: width style color;

Example : In this example, the div element is given the blue border that is 2 pixels thick and solid. The border can completely surround the content within the div.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 2px solid blue;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <div class="box">This div has a solid blue border.</div>
</body>

</html>

Output:

2. Using the Individual Border Properties

CSS can allows you to specify the each aspect of the border individually: width, style, and color. This method can provides the more flexibility as you can set the different widths, styles, or colors independently for the each property. This approach can be particularly useful if you want different attributes for the different sides of the border.

Syntax:

border-width: width;
border-style: style;
border-color: color;

Example : In this example, the div element can be given the red color. The width, style and color are set separately using the 3 pixels for the width, a dashed style, and the red color.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border-width: 3px;
            border-style: dashed;
            border-color: red;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="box">This div has a red dashed border.</div>
</body>

</html>

Output:

border2 — Using the Individual Border Properties

3. Adding the Borders to Specific Sides

Instead of applying the border to all sides, we can apply the border only to specific sides of the element using the border-top, border-bottom, border-right, and border-left, It can be useful for the styling elements where only certain sides need to be highlighted or separated.

Syntax:

border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

Example: In this example, the div styled to have the green solid border on the top side and the purple dotted border on the right side. It will highlighted only the specified sides of the div.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border-top: 5px solid green;
            border-right: 5px dotted purple;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="box">This div has borders on the top and right sides.</div>
</body>

</html>

Output:

border3 — Adding the Borders to Specific Sides

4. Using the outline Property

The outline property can be similar to the border property but differ in that it does not take up space or affect the layout of the element. It can be drawn outside the elements border and is often used for the accessibility purposes (ex: highlighting the elements on focus).

Syntax:

outline: width style color;

Example: In this example, the div element is given the orange dashed outline that is 3 pixels wide. This outline will not alter the layout but will visually highlight the element.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            outline: 3px dashed orange;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="box">This div has an orange dashed outline.</div>
</body>

</html>

Output:

5. Using the Classes for Reusable Borders

Defining the CSS class with a specific border style allow you to apply the same border to the multiple elements by just assigning the class to the each element. This approach can promotes the consistency and reusability across the different parts of the webpage.

Syntax:

.border-style {
    border: width style color;
}

Example: In this example, the class named .border-style can be defined with the double black border. This class can be applied to the both the div and p element to determine the reusability.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .border-style {
            border: 2px double black;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="border-style">First div with border.</div>
    <p class="border-style">Paragraph with the same border.</p>
</body>

</html>

Output

border5 — Using the Classes for Reusable Borders

6. Applying the Border through Inline CSS

We can apply the border directly to the HTML element using the style attribute within the tag itself. This method is simple but not recommended for the extensive use, as it leads to the inline styles that can clutter HTML and make maintenance harder.

Syntax:

<element style="border: width style color;">

Example: In this example, the div element is given a 1-pixel solid gray border directly through the style attribute in the HTML tag.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div style="border: 1px solid gray;">
        This div has a gray border.
    </div>
</body>

</html>