OutlineBorder
`TxOutlineBorder` border/ring/ring-offsetoverflow/clipPath/mask slot
OutlineBorder
TxOutlineBorder border/ring/ring-offsetoverflow/clipPath/mask slot
Basic Usage
Basic
Demo loads on client.
Mask Clipping (Example: Hexagon)
Mask Clip
Demo loads on client.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | string | div | Description for as. |
| variant | 'border' | 'ring' | 'ring-offset' | 'ring-inset' | 'ring-offset' | Description for variant. |
| shape | 'circle' | 'rect' | 'squircle' | 'circle' | DefaultText（TextDefaultText auto Text） |
| borderRadius | string | number | - | Text（Text px / CSS Text / inherit） |
| borderWidth | string | number | 1px | border Text（variant=border） |
| borderColor | string | var(--tx-border-color) | Description for borderColor. |
| borderStyle | 'solid' | 'dashed' | 'dotted' | solid | border Text |
| ringWidth | string | number | - | ring Text（DefaultText borderWidth） |
| ringColor | string | - | Description for ringColor. |
| offset | string | number | 2px | ring-offset Text（variant=ring-offset） |
| offsetBg | string | var(--tx-bg-color) | Description for offsetBg. |
| padding | string | number | 0 | ContentText |
| clipMode | 'none' | 'overflow' | 'clipPath' | 'mask' | overflow | Description for clipMode. |
| clipShape | 'auto' | 'circle' | 'rounded' | 'squircle' | 'hexagon' | auto | Description for clipShape. |
Was this helpful?