Regione Toscana Design System — Servizi Design System Core

Border Width 

<div class="rtds-p-6">
    <div>
        <h1 class="rtds-text-2xl rtds-font-bold">Border radius</h1>

        <p>Base demo for border width utilities.</p>
        <p>Full border, axis classes, or single side classes</p>

    </div>
    <div class="rtds-flex rtds-gap-8 rtds-py-6 rtds-flex-wrap">

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>0px</strong></h2>
            <p>rtds-border-0</p>
            <p>rtds-border-x-0</p>
            <p>rtds-border-y-0</p>
            <p>rtds-border-t-0</p>
            <p>rtds-border-r-0</p>
            <p>rtds-border-b-0</p>
            <p>rtds-border-l-0</p>
            <div class="rtds-grid  rtds-gap-2">
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-0">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-t-0">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-r-0">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-b-0">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-l-0">
                </div>
            </div>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>1px</strong></h2>
            <p>rtds-border</p>
            <p>rtds-border-x</p>
            <p>rtds-border-y</p>
            <p>rtds-border-t</p>
            <p>rtds-border-r</p>
            <p>rtds-border-b</p>
            <p>rtds-border-l</p>
            <div class="rtds-grid  rtds-gap-2">
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-t">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-r">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-b">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-l">
                </div>
            </div>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>2px</strong></h2>
            <p>rtds-border-2</p>
            <p>rtds-border-x-2</p>
            <p>rtds-border-y-2</p>
            <p>rtds-border-t-2</p>
            <p>rtds-border-r-2</p>
            <p>rtds-border-b-2</p>
            <p>rtds-border-l-2</p>
            <div class="rtds-grid  rtds-gap-2">
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-2">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-t-2">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-r-2">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-b-2">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-l-2">
                </div>
            </div>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>4px</strong></h2>
            <p>rtds-border-4</p>
            <p>rtds-border-x-4</p>
            <p>rtds-border-y-4</p>
            <p>rtds-border-t-4</p>
            <p>rtds-border-r-4</p>
            <p>rtds-border-b-4</p>
            <p>rtds-border-l-4</p>
            <div class="rtds-grid  rtds-gap-2">
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-4">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-t-4">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-r-4">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-b-4">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-l-4">
                </div>
            </div>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>8px</strong></h2>
            <p>rtds-border-8</p>
            <p>rtds-border-x-8</p>
            <p>rtds-border-y-8</p>
            <p>rtds-border-t-8</p>
            <p>rtds-border-r-8</p>
            <p>rtds-border-b-8</p>
            <p>rtds-border-l-8</p>
            <div class="rtds-grid  rtds-gap-2">
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-8">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-t-8">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-r-8">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-b-8">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 rtds-border-l-8">
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="rtds-p-6">
    <div>
        <h1 class="rtds-text-2xl rtds-font-bold">Border radius</h1>

        <p>Base demo for border width utilities.</p>
        <p>Full border, axis classes, or single side classes</p>

    </div>
    <div class="rtds-flex rtds-gap-8 rtds-py-6 rtds-flex-wrap">

    {% for rborder in rborders %}
        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>{{ rborder.name }}</strong></h2>
            <p>{{ rborder.class }}</p>
            <p>{{ rborder.classx }}</p>
            <p>{{ rborder.classy }}</p>
            <p>{{ rborder.classtop }}</p>
            <p>{{ rborder.classright }}</p>
            <p>{{ rborder.classbottom }}</p>
            <p>{{ rborder.classleft }}</p>
            <div class="rtds-grid  rtds-gap-2">
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 {{ rborder.class }}">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 {{ rborder.classtop }}">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 {{ rborder.classright }}">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 {{ rborder.classbottom }}">
                </div>
                <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-200 {{ rborder.classleft }}">
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
</div>
 
{
  "rborders": [
    {
      "name": "0px",
      "class": "rtds-border-0",
      "classx": "rtds-border-x-0",
      "classy": "rtds-border-y-0",
      "classtop": "rtds-border-t-0",
      "classright": "rtds-border-r-0",
      "classbottom": "rtds-border-b-0",
      "classleft": "rtds-border-l-0"
    },
    {
      "name": "1px",
      "class": "rtds-border",
      "classx": "rtds-border-x",
      "classy": "rtds-border-y",
      "classtop": "rtds-border-t",
      "classright": "rtds-border-r",
      "classbottom": "rtds-border-b",
      "classleft": "rtds-border-l"
    },
    {
      "name": "2px",
      "class": "rtds-border-2",
      "classx": "rtds-border-x-2",
      "classy": "rtds-border-y-2",
      "classtop": "rtds-border-t-2",
      "classright": "rtds-border-r-2",
      "classbottom": "rtds-border-b-2",
      "classleft": "rtds-border-l-2"
    },
    {
      "name": "4px",
      "class": "rtds-border-4",
      "classx": "rtds-border-x-4",
      "classy": "rtds-border-y-4",
      "classtop": "rtds-border-t-4",
      "classright": "rtds-border-r-4",
      "classbottom": "rtds-border-b-4",
      "classleft": "rtds-border-l-4"
    },
    {
      "name": "8px",
      "class": "rtds-border-8",
      "classx": "rtds-border-x-8",
      "classy": "rtds-border-y-8",
      "classtop": "rtds-border-t-8",
      "classright": "rtds-border-r-8",
      "classbottom": "rtds-border-b-8",
      "classleft": "rtds-border-l-8"
    }
  ]
}
  • Handle: @border-width
  • Preview:
  • Filesystem Path: components/01-design-system/primitives/border-width/border-width.njk

Border Width

Classi per lo spessore dei bordi degli elementi. Usano il prefisso rtds-.

Il bordo richiede anche una classe di colore (es. rtds-border-gray-01) e, se non già impostato, border-style: solid (Tailwind lo applica automaticamente con border).

Classi per tutti i lati

Classe Valore Utilizzo
rtds-border-0 0px Rimuove bordo
rtds-border 1px Bordo standard — input, card, divisori
rtds-border-2 2px Bordo enfatizzato — focus, selezione attiva
rtds-border-4 4px Bordo spesso — accento decorativo
rtds-border-8 8px Bordo molto spesso

Classi per asse

Pattern Lati
rtds-border-x-{n} Left + Right
rtds-border-y-{n} Top + Bottom

Classi per lato singolo

Pattern Lato
rtds-border-t-{n} Top
rtds-border-r-{n} Right
rtds-border-b-{n} Bottom
rtds-border-l-{n} Left

Dove {n} è uno dei valori: (niente) = 1px, 2, 4, 8, 0.

Divide (bordi tra elementi figli)

Per aggiungere bordi tra gli elementi di una lista o griglia:

Classe Lato
rtds-divide-x Bordi verticali tra elementi
rtds-divide-y Bordi orizzontali tra elementi
rtds-divide-x-2 Bordi verticali 2px
rtds-divide-y-2 Bordi orizzontali 2px

Esempi

<!-- Input con bordo standard -->
<input class="rtds-border rtds-border-gray-02 rtds-rounded" type="text">

<!-- Bordo inferiore divisore -->
<div class="rtds-border-b rtds-border-gray-03">...</div>

<!-- Focus con bordo enfatizzato -->
<input class="rtds-border rtds-border-gray-02 focus:rtds-border-2 focus:rtds-border-primary-500">

<!-- Lista con divisori -->
<ul class="rtds-divide-y rtds-divide-gray-02">
  <li class="rtds-py-3">Elemento</li>
  <li class="rtds-py-3">Elemento</li>
</ul>