How to Set a Border for an HTML Div Tag ?

Last Updated : 13 Mar, 2024

Borders help us make things look good on websites, this plays an important role in the external view of a website. In HTML and CSS, we have different ways to add borders, making it easier for developers to create attractive web pages that look neat and organized.

Table of Content

Inline Styles
Internal Styles
External Styles
Using JavaScript

Inline Styles

In this approach, we will use the style attribute to add inline styles for the specified element. It’s more convenient for making fast changes, but using it too much can make the code harder to manage and understand.

Example: The below code will explain how you can add inline styles using style attribute.

HTML


                    <!DOCTYPE html>
<html>

<head>
    <title>
        Inline Styles Example - GeeksforGeeks
    </title>
</head>

<body>

    <div style=
        "border: 2px dashed red; 
        padding: 20px; text-align: center; 
        max-width: 400px; margin: 0 auto;">
        <p>
            This is a div with a red dashed border, 
            styled using inline CSS.
        </p>
        <p>
            GeeksforGeeks is a renowned platform providing 
            comprehensive tutorials, articles, and coding challenges,
            empowering millions of developers worldwide to enhance 
            their skills and excel in the field of technology.
        </p>
    </div>

</body>

</html>

Output:

Red border with dashed style and no padding by using inline styles

Internal Styles

When we use internal styles, we put our CSS styles inside the HTML file using the <style> tag in the <head> section. This helps us keep our code organized. However, these styles are only usable within that specific HTML file.

Example: The below code uses internal styling using the <style> tag to set border to an HTML element.

HTML


                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Internal Styles Example</title>
    <style>
        .bordered-div {
            border: 2px solid black;
            padding: 20px;
            margin: 0 auto;
            max-width: 600px;
            background-color: #f9f9f9;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>

<body>
    <div class="bordered-div">
        <p>
            GeeksforGeeks (GFG) is a well-known platform for 
            computer science enthusiasts, providing a wide range of
            articles, tutorials, and resources on various programming 
            topics, algorithms, data structures, and more.
        </p>
        <p>
            Visit 
            <a href="https://www.geeksforgeeks.org/">
                GeeksforGeeks
            </a> 
            for enriching your knowledge and enhancing
            your programming skills.
        </p>
    </div>
</body>

</html>

Output:

border

External Styles

When we use external styles, we put our CSS rules in separate files that can be linked to the HTML document using link tag. This makes things more organized and reusable.

Example: The below code uses an external stylesheet to set the border to HTML element.

HTML


                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Double Style Border with
        Extra Padding Example
    </title>
    <link rel="stylesheet" type="text/css" 
        href="style.css">
</head>

<body>
    <div class="container">
        <div class="bordered-div">
            <div class="inner-content">
                <p>
                    GeeksforGeeks (GFG) is a leading platform for 
                    computer science enthusiasts, offering tutorials,
                    articles, and resources on programming, algorithms, 
                    data structures, and more.
                </p>
                <p>
                    Visit 
                    <a href="https://www.geeksforgeeks.org/">
                        GeeksforGeeks
                    </a> 
                    for enriching your knowledge and
                    enhancing your skills.
                </p>
            </div>
        </div>
    </div>
</body>

</html>

CSS


                    .container {
    max-width: 800px;
    margin: 0 auto;
}

.bordered-div {
    padding: 30px;
    background-color: #f9f9f9;
    border: 4px double #007bff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.inner-content {
    padding: 20px;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Output:

border

Using JavaScript

We can dynamically manipulate the CSS properties of elements. By selecting the <div> using its ID or class, we can modify its border style, width, and color.

Example: The below code implements JavaScript to dynamically add border to an HTML element.

HTML


                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>JavaScript Border Example</title>
    <link rel="stylesheet" type="text/css" 
        href="style.css">
</head>

<body>
    <div id="myDiv" class="bordered-div">
        <p>
            GeeksforGeeks (GFG) is a leading platform for 
            computer science enthusiasts, offering tutorials, 
            articles, and resources on programming, algorithms, 
            data structures, and more.
        </p>
        <p>
            Visit 
            <a href="https://www.geeksforgeeks.org/">
                GeeksforGeeks
            </a> 
            for enriching your knowledge and enhancing
            your skills.
        </p>
    </div>

    <script src="script.js"></script>
</body>

</html>

CSS


                    .bordered-div {
    max-width: 500px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Javascript


                    window.onload = function () {
    const myDiv = document.getElementById('myDiv');
    myDiv.style.border = '6px solid blue';
    myDiv.style.margin = '50px auto';
    myDiv.style.padding = '30px';
    myDiv.style.textAlign = 'center';
};