CSS Box Model
CSS Border
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
| 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; |
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 |
|---|---|---|---|---|
| border | 1 | 12 | 1 | 1 |
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.