? CSS Borders

? Quick Overview

• border is a shorthand that sets border width, style and color in one line.
• You can also control each side separately (top, right, bottom, left).
• border-radius is used to round the corners of the element.
• Without a border-style, the border will not be visible.

? Key Concepts

• Border Width – thickness of the border (e.g., 1px, 2px, 5px).
• Border Style – visual style like solid, dashed, dotted, etc.
• Border Color – color of the border; can be hex, named color, or rgba.
• Shorthand vs Longhand – use border to set all at once, or properties like border-width, border-style, border-color individually.
• Border Radius – controls corner rounding (e.g., 10px, 50% for circles).

? Syntax (Shorthand)

Basic shorthand syntax for setting all border properties at once:

/* Shorthand border syntax: width style color */
.card {
border: 2px solid #333;
}

? Examples

Here are a few common border styles you will use frequently:

/* Different border styles and rounded corners */
.container {
border: 2px solid #333;
}

.dashed-border {
border: 3px dashed #2563eb;
}

.rounded-border {
border: 5px solid #16a34a;
border-radius: 10px;
}

? Common Border Properties

?️ Live Output / Visual Example

/* Simple bordered box example */
.box {
border: 5px solid red;
padding: 10px;
max-width: 260px;
margin: 12px auto 0;
}