# HoverBorderGradient

Source: https://lumeo.nativ.sh/components/hover-border-gradient

# HoverBorderGradient

Border whose gradient rotates to follow cursor position around the element perimeter — revealed only on hover.

## When to Use

-   Call-to-action buttons where the cursor-aware border adds premium feel.
-   Input or textarea focus rings with a gradient effect.
-   Card borders that respond to cursor proximity without being always-on.

Preview Code

Button Wrap

Hover me

Pill button

Copy Code

Preview Code

Card Wrap

### Card Title

Hover the card to see the rotating gradient border.

Copy Code

## API Reference

### HoverBorderGradient

Property

Type

Default

Description

BorderRadius

int

8

Border radius in pixels. Match to the child element's border-radius.

DurationMs

int

500

Transition duration when the gradient fades in/out on hover.

ChildContent

RenderFragment?

null

Element wrapped by the gradient border.

Class

string?

null

Additional CSS classes.

## Related Components

-   [ShineBorder](/components/shine-border) — Always-on perimeter shine animation.
-   [BorderBeam](/components/border-beam) — Animated gradient beam traveling the border.
-   [MagicCard](/components/magic-card) — Full card with cursor spotlight and 3D tilt.