Border Box 8

dvk-border-box-8 recreates DataV Vue3 BorderBox1 as a dynamic polygon panel with four fixed mirrored 150 x 150 animated corner ornaments.

DataV BorderBox1-style animated corner panel

LIVE

Requests2.84M+18.6%

Latency38ms-9.2%

Uptime99.98%+0.3%

html

<dvk-border-box-8 colors="#235fa7,#4fd2dd" background-color="rgba(5, 18, 46, 0.32)">
  <section>Border Box 8</section>
</dvk-border-box-8>

Props

Name	Type	Default	Notes
`color`	`string`	CSS variable fallback	Primary corner ornament color.
`secondary-color`	`string`	CSS variable fallback	Secondary corner ornament color.
`background-color`	`string`	`transparent`	Panel background fill color.
`colors`	`string`	empty	Comma-separated primary and secondary colors. Use `background-color` for an optional panel fill.
`animated`	`boolean`	`true`	Whether corner fill animations are rendered.
`paused`	`boolean`	`false`	Disables corner fill animations while keeping the static frame visible.

Name	Detail
`dvk-ready`	`{ tagName }`

Name	Meaning
`--dvk-color-primary`	Primary corner color fallback.
`--dvk-color-secondary`	Secondary corner color fallback.
`--dvk-border-box-8-background`	Panel background fallback color.
`--dvk-border-box-padding`	Shared override for automatic content inset across border boxes.
`--dvk-border-box-8-padding`	Component-specific override for automatic content inset.