How To Add Border In HTML?

Last Updated : 23 Jul, 2025

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:

1. Using the border Property

The border property in CSS is a simple way to draw a line around an element, like a box around text or a button. You can set how thick the line is, what style it has (like solid or dashed), and what color it should be—all in one go.

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.

index.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 lets you customize each part of a border—width, style, and color—on its own. This is useful when you want more control, like giving each side of an element a different look. You don’t have to set everything in one line; instead, you can adjust each part separately.

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.

index.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:

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.

index.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:

4. Using the outline Property

The outline property in CSS is similar to a border, but with a key difference: it doesn’t take up space or change the layout of the element. Instead, it’s drawn outside the element’s border. Outlines are often used for accessibility—for example, to highlight buttons or form fields when they’re focused (like when you tab through a form).

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.

index.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.

index.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

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.

index.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>

Output

HTML Introduction

geekforgs9hp

Improve

Article Tags :

HTML

How To Add Border In HTML?

1. Using the border Property

2. Using the Individual Border Properties

3. Adding the Borders to Specific Sides

4. Using the outline Property

5. Using the Classes for Reusable Borders

6. Applying the Border through Inline CSS

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?