How to create a Border around an HTML Element using CSS ?

Last Updated : 01 Feb, 2024

Creating a border around an HTML element in CSS involves using the border property. This property allows you to define the style, color, and width of the border surrounding the selected element. The border property can be used in a shorthand form or separately for individual properties.

Syntax

/* Shorthand syntax */
.box {
    border: 2px solid #333;
}

OR

/* Individual properties */
.box-individual {
    border-width: 1px;
    border-style: dashed;
    border-color: red;
}

Example:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Border Around HTML Element</title>
    <style>
        p.dotted {
            border-style: dotted;
        }
 
        p.dashed {
            border-style: dashed;
        }
 
        p.solid {
            border-style: solid;
        }
 
        p.double {
            border-style: double;
        }
    </style>
</head>
 
<body>
    <h2>The border-style Property</h2>
    <p>Geeksforgeeks</p>
    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
</body>
 
</html>

Output:

Screenshot-2024-02-01-100156

Important Points:

Shorthand and Individual Properties: The border property can be written in shorthand or as separate properties (border-width, border-style, border-color).
Color Values: The border-color property accepts various color values.
Style Options: The border-style property allows you to choose from different styles, such as solid, dashed, dotted, etc.
Width: The border-width property sets the width of the border.