Border Radius
Tetapkan jejari sempadan untuk semua bucu atau bucu tertentu
Sintaks
visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
none | border-radius: var(--r-none) | Tiada pembulatan |
small | border-radius: var(--r-small) | Jejari kecil |
medium | border-radius: var(--r-medium) | Jejari sederhana |
big | border-radius: var(--r-big) | Jejari besar |
round | border-radius: var(--r-round) | Sepenuhnya bulat |
Contoh
html
<div visual="rounded:medium">Rounded corners</div>
<div visual="rounded:round">Pill shape</div>
<div visual="rounded-t:medium">Top rounded</div>
<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>Pratonton
Jejari Sempadan
visual="rounded:medium" - Bulatkan sudut elemen dari halus hingga berbentuk pil
none
small
medium
round
Lihat Kod
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>Jejari Sempadan Arah
visual="rounded-t:medium" - Bulatkan bucu tertentu untuk bentuk unik
top
bottom
left
right
Lihat Kod
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-t:medium">top</div>
<div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
<div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
<div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div visual="border:[custom-value]">Custom</div>Nota
TIP
Sokongan Skala Tailwind
Gunakan awalan tw- untuk mengakses skala jejari Tailwind: rounded:tw-lg (0.5rem), rounded:tw-2xl (1rem)