GradientBorder

Animated gradient border wrapper for highlighting content containers while keeping the inner content layout under your control.

Basic Usage

GradientBorder

Demo will load when visible.

<template>
  <TxGradientBorder :padding="16" :border-radius="16">
    <div style="background: var(--tx-bg-color); border-radius: 12px; padding: 16px;">
      Content
    </div>
  </TxGradientBorder>
</template>

API

Props

Prop	Type	Default	Description
`as`	`string`	`'div'`	Root element tag rendered by the wrapper.
`borderWidth`	`string \| number`	`'2px'`	Gradient border width; numeric values are normalized to pixels.
`borderRadius`	`string \| number`	`'12px'`	Border radius applied to the wrapper and gradient layer.
`padding`	`string \| number`	`'12px'`	Inner content padding; numeric values are normalized to pixels.
`animationDuration`	`number`	`4`	Rotation animation duration in seconds.