Tutorial Article

CSS Border

The CSS Border property is used to define the outline around an HTML element. It helps in visually separating elements and improving layout structure by adding lines around content. A border consists of three main parts: 👉 This adds a 2px solid red border around all <p> elements. Attributes Property Description Example border Sets all […]

Apr 2, 2026CSSCSS Box ModelTutorials

The CSS Border property is used to define the outline around an HTML element.

It helps in visually separating elements and improving layout structure by adding lines around content.

A border consists of three main parts:

Width (thickness)
Style (solid, dashed, etc.)
Color

Syntax

selector {
    border: width style color;
}

Example

p {
    border: 2px solid red;
}

👉 This adds a 2px solid red border around all <p> elements.

Attributes

Property	Description	Example
border	Sets all border properties	border: 1px solid black;
border-width	Sets border thickness	border-width: 2px;
border-style	Defines border style	border-style: dashed;
border-color	Sets border color	border-color: red;
border-radius	Rounds the corners of border	border-radius: 10px;

Example

Complete CSS Border Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Border Example</title>
    <style>
        div {
            border: 2px solid blue;
            padding: 10px;
        }

        p {
            border: 1px dashed red;
            padding: 10px;
        }

        h1 {
            border: 3px solid black;
            border-radius: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>Border Example</h1>

    <div>This is a div with solid border.</div>

    <p>This paragraph has dashed border.</p>

</body>
</html>

Output

Browser Output

The heading will have a solid black border with rounded corners
The <div> will have a blue solid border
The <p> will have a red dashed border
Padding will create space inside the borders

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

Notes

Border requires at least style to be visible
You can set borders individually:
- border-top, border-right, border-bottom, border-left
border-radius is used for rounded corners
Borders increase the total size of an element
Works together with margin and padding

Conclusion

CSS Border is essential for defining element boundaries and enhancing visual structure. By customizing width, style, and color, you can create clean and attractive layouts.