CSS Borders

CSS Borders: Styles, Widths, Individual Sides, and Radius

CSS borders draw strokes around the edge of an element's box, sitting between padding and margin. Beyond simple 1px dividers around cards and inputs, you can style individual sides—like a thick left accent stripe—or round corners cleanly with border-radius.

Border Shorthand and Individual Properties

Every visible border requires three parts: width, style, and color. The border shorthand sets all three at once (border: 1px solid #cbd5e1;). Notice that border-style defaults to none, so a border never appears unless you declare a style like solid, dashed, dotted, or double.

You can target individual edges with border-top, border-right, border-bottom, and border-left—or logical properties like border-inline-start for multi-language layouts.

.callout-info {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-left: 4px solid #0284c7;
    border-radius: 8px;
    padding: 16px;
}

.pill-badge {
    display: inline-block;
    border: 1px dashed #64748b;
    border-radius: 9999px;
    padding: 4px 12px;
}

Borders and Box Sizing

By default (content-box), adding a 4px border makes an element 8px wider than its declared width. Applying box-sizing: border-box; keeps borders and padding inside the declared width so grid columns never wrap unexpectedly.

Common Mistakes to Avoid

• Writing border: 2px #2563eb; without solid: Omitting border-style leaves the style as none, making the border invisible.
• Animating border-width on hover: Changing border thickness shifts neighboring elements; toggle border-color or box-shadow instead.
• Using border: none on buttons without hover/focus states: Keep accessible :focus-visible outlines when stripping default button borders.

Frequently Asked Questions

How do I make a circular avatar with CSS border-radius?

Give the square img equal width and height (64px by 64px) and apply border-radius: 50%; alongside object-fit: cover;.

What is the difference between border and outline in CSS?

A border takes up layout space inside the box model and affects element size, whereas an outline draws outside the border edge without shifting layout.