CSS Border Color Transition for Input Focus and Card Selection

Transitioning Border Colors

Border color transitions are essential for form inputs and selectable card components. They provide clear visual feedback about focus, selection, and validation states.

Input Focus Border

.input {
  border: 2px solid #27272a;
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.2s ease;
}

.input:focus {
  border-color: #3b82f6;
  outline: none;
}

.input.error {
  border-color: #ef4444;
}

.input.success {
  border-color: #22c55e;
}

Selectable Card Border

.card {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 16px;
  background-color: var(--surface);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.card:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.card.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

Border vs. Box-Shadow Ring

Using box-shadow instead of border avoids layout shift because box-shadow does not affect element dimensions:

.input {
  border: 1px solid #27272a;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

Why Start with transparent Border

If you add a border only on hover, the element shifts by the border width. Starting with a transparent border of the same width eliminates the layout shift:

/* Bad: causes layout shift */
.card { border: none; }
.card:hover { border: 2px solid blue; }

/* Good: no layout shift */
.card { border: 2px solid transparent; }
.card:hover { border-color: blue; }