OutlineBorder

Border and ring wrapper with optional clipping for avatars, thumbnails, and badges. It supports border, ring, ring-offset, and inset ring styles.

Basic Usage

Basic

Demo will load when visible.

<template>
  <TxOutlineBorder :ring-width="2" ring-color="var(--tx-color-primary)" :offset="2" offset-bg="var(--tx-bg-color)">
    <TxAvatar src="https://avatars.githubusercontent.com/u/1?v=4" />
  </TxOutlineBorder>

  <TxOutlineBorder
    variant="border"
    :border-width="2"
    border-color="var(--tx-border-color)"
    :padding="2"
    shape="rect"
    :border-radius="12"
  >
    <img
      src="https://avatars.githubusercontent.com/u/2?v=4"
      style="width:40px;height:40px;object-fit:cover;border-radius:12px;"
    >
  </TxOutlineBorder>
</template>

Mask Clipping (Example: Hexagon)

Mask Clip

Demo will load when visible.

<template>
  <TxOutlineBorder
    variant="ring"
    :ring-width="2"
    ring-color="var(--tx-color-primary)"
    clip-mode="mask"
    clip-shape="hexagon"
  >
    <img
      src="https://avatars.githubusercontent.com/u/3?v=4"
      style="width:48px;height:48px;object-fit:cover;"
    >
  </TxOutlineBorder>
</template>

API

Props

Prop	Type	Default	Description
as	`string`	`div`	Root element tag rendered by the wrapper.
variant	`'border' \| 'ring' \| 'ring-offset' \| 'ring-inset'`	`'ring-offset'`	Visual outline mode.
shape	`'circle' \| 'rect' \| 'squircle'`	`'circle'`	Shape preset used for the default radius and automatic clipping shape.
borderRadius	`string \| number`	-	Explicit radius; numeric values are normalized to pixels.
borderWidth	`string \| number`	`1px`	Border width, also used as the default ring width.
borderColor	`string`	`var(--tx-border-color)`	Border color, also used as the default ring color.
borderStyle	`'solid' \| 'dashed' \| 'dotted'`	`solid`	CSS border style used by `variant="border"`.
ringWidth	`string \| number`	-	Ring width; falls back to `borderWidth` when omitted.
ringColor	`string`	-	Ring color; falls back to `borderColor` when omitted.
offset	`string \| number`	`2px`	Ring-offset gap used by `variant="ring-offset"`.
offsetBg	`string`	`var(--tx-bg-color)`	Background color used to paint the ring-offset gap.
padding	`string \| number`	`0`	Padding applied inside the outline wrapper.
clipMode	`'none' \| 'overflow' \| 'clipPath' \| 'mask'`	`overflow`	Clipping strategy applied to the content layer.
clipShape	`'auto' \| 'circle' \| 'rounded' \| 'squircle' \| 'hexagon'`	`auto`	Clip shape; `auto` derives it from `shape`.