Border Box 16

dvk-border-box-16 renders a floating CPU-like border with broken outer rails, a very light open inner hairline, shallow edge pins, sparse chip pads, and subtle pin pulse motion.

Border Box 16

floating thin CPU rail border

LIVE

Requests2.84M+18.6%

Latency38ms-9.2%

Uptime99.98%+0.3%

<dvk-border-box-16 colors="#38d8ff,#69ffe1,#f8fbff" glow-intensity="0.7">
  <section>Border Box 16</section>
</dvk-border-box-16>

Content

Place headings and charts in the default slot. CSS parts are styling hooks, not named slots. Keep the automatic content inset; see the shared content-area contract for wrapper padding and explicit overrides.

Props

Name	Type	Default	Notes
color	string	CSS variable fallback	Primary chip perimeter rail color.
secondary-color	string	CSS variable fallback	Secondary hairline and pin color.
accent-color	string	CSS variable fallback	Accent color for active chip pads and pulsing pins.
colors	string	empty	Comma-separated primary, secondary, and accent colors.
glow-intensity	number	0.7	Multiplier for the active pin and pad glow strength.
animated	boolean	true	Whether the border renders subtle chip pin pulse animations.
paused	boolean	false	Disables chip pin motion while keeping the static frame visible.

Events

Name	Detail
dvk-ready	{ tagName }

CSS Variables

Name	Meaning
--dvk-color-primary	Primary rail fallback.
--dvk-color-secondary	Secondary hairline and pin fallback.
--dvk-color-accent	Active chip pad fallback.
--dvk-border-box-padding	Shared override for automatic content inset across border boxes.
--dvk-border-box-16-padding	Component-specific override for automatic content inset.

Parts

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