Border transition
Animate border-color, width, radius, and outline on hover — four patterns in one.
Quick implementation
/* Border color transition */
.border-color {
border: 2px solid oklch(0.30 0.02 260);
transition: border-color 0.3s ease;
}
.border-color:hover,
.border-color:focus-visible {
border-color: oklch(0.72 0.19 265);
}
/* Border radius morph (square to circle) */
.border-radius {
border: 2px solid oklch(0.55 0.15 265);
border-radius: 0.5rem;
transition: border-radius 0.4s ease;
}
.border-radius:hover,
.border-radius:focus-visible {
border-radius: 50%;
}
/* Outline ring on hover */
.outline-ring {
border: 2px solid transparent;
outline: 2px solid transparent;
outline-offset: 4px;
transition: outline-color 0.3s ease, border-color 0.3s ease;
}
.outline-ring:hover,
.outline-ring:focus-visible {
border-color: oklch(0.72 0.19 265);
outline-color: oklch(0.72 0.19 265 / 0.4);
}
@media (prefers-reduced-motion: reduce) {
.border-color,
.border-radius,
.outline-ring {
transition-duration: 0.01s;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building interactive card components.
Goal: Animate border properties (color, width, radius, outline) on hover using CSS transitions — no JavaScript.
Technical constraints:
- Transition border-color, border-radius, and outline independently with 0.3–0.4s ease.
- Avoid border-width transitions on layout-sensitive elements — they shift content. Use outline or box-shadow as a width-like alternative.
- Use oklch() for all color values — no hex or rgba().
- Include :focus-visible so keyboard users see the effect.
- Use outline-offset to create a ring effect separate from the border.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept variant prop ("color" | "radius" | "outline") to select the transition style.
Edge cases to handle:
- Respect prefers-reduced-motion: reduce transition to near-instant.
- border-width transitions cause layout shift — prefer outline or box-shadow for width-like effects.
- Ensure the transparent-to-color border technique uses box-sizing: border-box to prevent size jumps.
Return CSS only.Why this matters in 2026
Border transitions are some of the most common hover micro-interactions — card highlights, input focus rings, avatar morphs. Modern CSS lets you transition border-color, border-radius, and even outline natively. The outline approach is especially useful because it doesn't affect layout, unlike border-width, making it a safer choice for interactive states.
The logic
Each border property is independently animatable. border-color transitions paint-only so it's cheap. border-radius interpolates between numeric values — 0.5rem to 50% produces a smooth square-to-circle morph. For ring effects, transition outline-color from transparent to a visible value with outline-offset creating the gap. Avoid transitioning border-width on inline elements as it shifts surrounding content — use box-shadow or outline for width-like effects instead.
Accessibility & performance
border-color and outline-color transitions are paint-only and very efficient. border-radius triggers paint but not layout. border-width triggers layout — use it sparingly. Always include :focus-visible alongside :hover so the effect is visible to keyboard navigators, and respect prefers-reduced-motion by collapsing duration to near-zero.