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
selector {
border: width style color;
}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
<!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-radiusis 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.