Borders
Draw lines around elements and round their corners.
Syntax
border: 2px solid #2965f1; border-radius: 8px;The border shorthand sets width, style, and color at once. Common styles are solid, dashed, dotted, and double.
Use border-radius to round corners — a large value on a square creates a circle.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses border-bottom: 2px solid #2965f1 on an active navigation tab to indicate the current page without a full box border.
- A designer rounds card corners with border-radius: 12px to match a soft, modern design system style.
- A developer uses a dashed border on a drag-and-drop file upload zone to visually suggest an area where content can be dropped.
More examples
Border shorthand and individual sides
Sets a full border with shorthand then overrides only one side to create an underline-style text input.
.card {
border: 1px solid #ddd;
}
/* Override only the bottom */
.input-underline {
border: none;
border-bottom: 2px solid #2965f1;
outline: none;
padding: 8px 0;
}Rounded corners with border-radius
Shows border-radius creating a pill-shaped button and a perfect circle for avatar images.
.pill-btn {
border-radius: 50px;
padding: 10px 24px;
background-color: #2965f1;
color: #fff;
border: none;
}
.avatar {
border-radius: 50%;
width: 48px;
height: 48px;
}Dashed drop zone border
Uses a dashed border style to signal a drag-and-drop area and changes color when a dragged item hovers over it.
.drop-zone {
border: 2px dashed #aaa;
border-radius: 8px;
padding: 40px;
text-align: center;
color: #888;
transition: border-color 0.2s;
}
.drop-zone.active {
border-color: #2965f1;
}
Discussion