border

Definition

The border CSS property is a shorthand property that sets the border width, border style, and border color of an element in a single declaration. Borders are part of the CSS box model and create visual boundaries around elements. The border property allows you to quickly define all border properties at once, making it convenient for styling elements.

Syntax

.card {
  border: 2px solid #0ea5e9;
  border-radius: 1rem;
}

Values

<border-width>: keywords like thin, medium, thick, or explicit lengths.
<border-style>: solid, dashed, dotted, double, groove, ridge, inset, outset, none.
<color>: named colors, hex, RGB(A), HSL(A), or currentColor.
Specify up to four values to assign different sides in clockwise order.

Practical Examples

.card {
  border: 2px solid #0ea5e9;
}

.card--accent {
  border: 2px dashed color-mix(in srgb, #0ea5e9 45%, #1e293b);
}

Shorthand borders make it easy to swap styles, widths, or colors for different states.

HTML

border: 2px solid #0ea5e9

Primary state

border: 2px dashed color-mix(...)

Secondary variant

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border: 2px solid #0ea5e9</p>
    <div class="rounded-lg border-2 border-sky-500 p-4 text-sm text-slate-700">Primary state</div>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border: 2px dashed color-mix(...)</p>
    <div class="rounded-lg border-2 border-dashed border-sky-700/80 p-4 text-sm text-slate-700">Secondary variant</div>
  </div>
</div>

Tips & Best Practices

Combine border shorthands with CSS custom properties for easy theming.
Use border-width and border-style longhands when you need to animate individual aspects.
Pair with outline for high-contrast focus states without shifting layout.

Accessibility & UX Notes

Ensure focused elements remain visible; combine border changes with outline or box-shadow for strong focus cues.

Browser Support

The border shorthand is universally supported across browsers.

border-radius for rounded corners.
border-color, border-style, border-width longhands for granular control.
outline for focus indicators that do not affect layout.