CSS border properties define the decorative outlines surrounding HTML elements. Borders can be customized in width, style, color, and side assignment.
You declare borders using individual properties or the border shorthand:
/* Shorthand declaration: width style color */
.box {
border: 2px solid #38bdf8;
}
/* Individual side border declaration */
.card {
border-top: 4px solid #059669;
border-left: 1px dashed #334155;
}
Common border style values:
solid: Single continuous solid line.dashed: Series of square dashes.dotted: Series of round dots.double: Two parallel solid lines.none: Removes borders completely.flowchart LR
A["border: 2px solid #38bdf8;"] --> B["Width (2px)"]
A --> C["Style (solid / dashed / dotted)"]
A --> D["Color (#38bdf8)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Borders Demonstration</title>
<style>
.callout-box {
background-color: #1e293b;
border-left: 5px solid #38bdf8;
border-top: 1px solid #334155;
border-right: 1px solid #334155;
border-bottom: 1px solid #334155;
padding: 1.5rem;
border-radius: 6px;
max-width: 500px;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<div class="callout-box">
<h3 style="margin-top: 0; color: #38bdf8;">Accent Left Border</h3>
<p>Combining a thick left accent border with subtle side borders creates modern UI callout boxes.</p>
</div>
</body>
</html>
border shorthand: Write border: 1px solid #334155; instead of specifying three separate lines for width, style, and color.border-left or border-top for accent highlights: Creates modern callout cards without heavy outer borders.border: 0 or border: none to strip default form borders: Removes default browser borders from buttons and inputs.Create a CSS class .dashed-card that sets a 2px dashed border with color #38bdf8!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.