Border Box 9

dvk-border-box-9 recreates DataV Vue3 BorderBox7 as a glowing panel with a 1px host border, inset shadow, and two layers of rounded corner linework drawn from the live host size.

Border Box 9

DataV BorderBox7-style glowing corner frame

LIVE

Requests2.84M+18.6%

Latency38ms-9.2%

Uptime99.98%+0.3%

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

Props

Name	Type	Default	Notes
color	string	CSS variable fallback	Primary border, outer corner, and inset glow color.
secondary-color	string	CSS variable fallback	Secondary inner corner line color.
background-color	string	transparent	Panel background color.
colors	string	empty	Comma-separated primary and secondary colors. Use background-color for an optional panel fill.

Events

Name	Detail
dvk-ready	{ tagName }

CSS Variables

Name	Meaning
--dvk-color-primary	Primary border and glow fallback.
--dvk-color-secondary	Secondary corner line fallback.
--dvk-border-box-9-background	Panel background fallback color.
--dvk-border-box-9-border-color	Border color override.
--dvk-border-box-9-border-width	Border width override.
--dvk-border-box-padding	Shared override for automatic content inset across border boxes.
--dvk-border-box-9-padding	Component-specific override for automatic content inset.

Parts

Part	Description
frame	Absolute frame layer.
graphic	Internal SVG layer.
content	Slotted content wrapper.