Border Radius
Set border radius
Syntax
visual="rounded:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
none | border-radius: var(--r-none) | No rounding |
small | border-radius: var(--r-small) | Small radius |
medium | border-radius: var(--r-medium) | Medium radius |
big | border-radius: var(--r-big) | Large radius |
round | border-radius: var(--r-round) | Fully round |
Examples
html
<div visual="rounded:medium">Rounded corners</div>
<div visual="rounded:round">Pill shape</div>Preview
Border Radius
visual="rounded:medium" - Round element corners from subtle to pill-shaped
none
small
medium
round
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:none">none</div>
<div space="p:small" visual="bg:primary text:white rounded:small">small</div>
<div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
<div space="p:small" visual="bg:primary text:white rounded:round">round</div>
</div>Notes
TIP
Tailwind Scale Support
Use tw- prefix to access Tailwind radius scale: rounded:tw-lg (0.5rem), rounded:tw-2xl (1rem)