Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Box Model

CSS Border

Written by Updated

Build borders with width, style, color, radius, logical sides, and shorthands while accounting for their effect on box dimensions.

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. The supporting concepts are explained in CSS Outline and CSS Shadows.

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

PropertyDescriptionExample
borderSets all border propertiesborder: 1px solid black;
border-widthSets border thicknessborder-width: 2px;
border-styleDefines border styleborder-style: dashed;
border-colorSets border colorborder-color: red;
border-radiusRounds the corners of borderborder-radius: 10px;

Borders and element dimensions

A border participates in the box model. With content-box, its width is added outside the declared content size; with border-box, it is included in the declared size. A visible border is not a substitute for a focus indicator unless the focused state remains clearly distinguishable. Logical properties such as border-inline-start also adapt more naturally to different writing directions.

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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
border11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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.

PreviousCSS PaddingNextCSS Outline