# ShineBorder

Source: https://lumeo.nativ.sh/components/shine-border

# ShineBorder

A border with a subtle linear shine that travels around the perimeter. Softer and less aggressive than BorderBeam — ideal for cards, panels, and inputs.

## When to Use

-   Pricing cards or feature cards that need a premium feel without heavy animation.
-   Dashboard panels or stat widgets that subtly draw attention.
-   Profile cards or selection states with a refined animated border.

Preview Code

Card with Shine Border

### Pro Plan

Everything you need to ship faster.

Get Started

Copy Code

Preview Code

Custom Color & Duration

Amber Shine

Violet Shine

Copy Code

## API Reference

### ShineBorder

Property

Type

Default

Description

DurationMs

int

3000

Duration of one full perimeter sweep in milliseconds.

BorderRadius

int

8

Border radius in pixels.

ShineColor

string

"var(--color-primary)"

Color of the shine highlight. Any CSS color value.

ShineWidthPct

int

20

Width of the shine arc as a percentage of the perimeter.

ChildContent

RenderFragment?

null

Card or panel content wrapped by the shine border.

## Related Components

-   [BorderBeam](/components/border-beam) — More prominent animated gradient border beam.
-   [HoverBorderGradient](/components/hover-border-gradient) — Border gradient that follows cursor position.
-   [MagicCard](/components/magic-card) — Card with cursor-following spotlight.