The border Shorthand
The border property combines width, style, and color into a single declaration: border: width style color.
Basic Border
<style>
.box {
border: 2px solid #333;
padding: 16px;
}
</style>
<div class="box">A box with a solid border</div>Output
Border Styles
| Value | Appearance |
|---|---|
| solid | A single continuous line |
| dashed | A series of dashes |
| dotted | A series of dots |
| double | Two parallel lines |
| none | No border |
Styling Individual Sides
Each side of the border can be styled independently using border-top, border-right, border-bottom, and border-left.
Single-Side Border
<style>
.quote {
border-left: 4px solid steelblue;
padding-left: 12px;
color: #555;
font-style: italic;
}
</style>
<p class="quote">A quote with only a left border accent.</p>Output
Rounded Corners
border-radius rounds an element’s corners. A single value rounds all four corners equally; four values control each corner independently.
border-radius
<style>
.rounded {
border: 2px solid #764ba2;
border-radius: 12px;
padding: 16px;
}
.circle {
width: 80px;
height: 80px;
background: #667eea;
border-radius: 50%;
}
</style>
<div class="rounded">Rounded corners</div>
<div class="circle"></div>Output
Perfect Circles
Setting border-radius: 50% on a square element (equal width and height) produces a perfect circle — a common technique for avatars and icon buttons.
Best Practice
Use consistent border-radius values across your design (e.g. always 4px, 8px, or 16px) rather than arbitrary numbers, to keep the interface feeling cohesive.