CSS Box Model

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:

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

Syntax

css

selector {
    border: width style color;
}

Example

css

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

html

<!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

html

<div>

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: <ul class="wp-block-list"> <li>border-top, border-right, border-bottom, border-left</li> </ul>
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.

PreviousCSS Padding NextCSS Outline