Border

Tetapkan warna sempadan untuk semua sisi atau sisi tertentu

Sintaks

visual="border:[color]" | visual="border-{t|b|l|r|x|y}:[color]"

Nilai

Nilai	CSS Output	Huraian
primary	border-color: var(--c-primary); border-style: solid	Sempadan warna utama
gray-300	border-color: var(--c-gray-300); border-style: solid	Sempadan kelabu cerah
danger	border-color: var(--c-danger); border-style: solid	Sempadan bahaya/ralat

Contoh

<div visual="border:primary border-w:thin">Primary border</div>
<div visual="border-t:primary border-t-w:regular">Top only</div>
<div visual="border-b:gray-300 border-b-w:thin">Bottom only</div>
<div visual="border-x:primary border-x-w:regular">Left & right</div>
<div visual="border-y:gray-300 border-y-w:thin">Top & bottom</div>

Pratonton

Warna Sempadan

visual="border:primary" - Terapkan sempadan dengan warna pada semua sisi

primary

danger

neutral

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:medium" visual="border:primary border-w:regular rounded:small">primary</div>
  <div space="p:medium" visual="border:danger border-w:regular rounded:small">danger</div>
  <div space="p:medium" visual="border:neutral-400 border-w:regular rounded:small">neutral</div>
</div>

Sempadan Arah

visual="border-t:primary" - Terapkan sempadan pada sisi tertentu

top

bottom

left

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:medium" visual="border-t:primary border-t-w:regular bg:white dark:bg:neutral-800 rounded:small">top</div>
  <div space="p:medium" visual="border-b:primary border-b-w:regular bg:white dark:bg:neutral-800 rounded:small">bottom</div>
  <div space="p:medium" visual="border-l:primary border-l-w:regular bg:white dark:bg:neutral-800 rounded:small">left</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div visual="border:[custom-value]">Custom</div>