Regione Toscana Design System — Servizi Design System Core

Border Radius 

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

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>0px</strong></h2>
        <p>rtds-rounded-none</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-none">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>2px</strong></h2>
        <p>rtds-rounded-sm</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-sm">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>4px</strong></h2>
        <p>rtds-rounded</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>6px</strong></h2>
        <p>rtds-rounded-md</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-md">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>8px</strong></h2>
        <p>rtds-rounded-lg</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-lg">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>12px</strong></h2>
        <p>rtds-rounded-xl</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-xl">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>16px</strong></h2>
        <p>rtds-rounded-2xl</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-2xl">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>24px</strong></h2>
        <p>rtds-rounded-3xl</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-3xl">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>50%</strong></h2>
        <p>rtds-rounded-full</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 rtds-rounded-full">
        </div>
    </div>

</div>
 
<div class="rtds-flex rtds-gap-8 rtds-p-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>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-primary-200 {{ rborder.class }}">
        </div>
    </div>
{% endfor %}
</div>
 
{
  "rborders": [
    {
      "name": "0px",
      "class": "rtds-rounded-none"
    },
    {
      "name": "2px",
      "class": "rtds-rounded-sm"
    },
    {
      "name": "4px",
      "class": "rtds-rounded"
    },
    {
      "name": "6px",
      "class": "rtds-rounded-md"
    },
    {
      "name": "8px",
      "class": "rtds-rounded-lg"
    },
    {
      "name": "12px",
      "class": "rtds-rounded-xl"
    },
    {
      "name": "16px",
      "class": "rtds-rounded-2xl"
    },
    {
      "name": "24px",
      "class": "rtds-rounded-3xl"
    },
    {
      "name": "50%",
      "class": "rtds-rounded-full"
    }
  ]
}
  • Handle: @border-radius
  • Preview:
  • Filesystem Path: components/01-design-system/primitives/border-radius/border-radius.njk

Border Radius

Classi per arrotondare gli angoli degli elementi. Usano il prefisso rtds-.

Classi disponibili

Classe Valore Utilizzo tipico
rtds-rounded-none 0px Angoli quadrati, reset
rtds-rounded-sm 2px Arrotondamento minimo — tooltip, badge piccoli
rtds-rounded 4px Arrotondamento standard — pulsanti, input, card
rtds-rounded-md 6px Arrotondamento medio — dropdown, panel
rtds-rounded-lg 8px Arrotondamento ampio — modal, card grandi
rtds-rounded-xl 12px Arrotondamento molto ampio
rtds-rounded-2xl 16px Card con design moderno
rtds-rounded-3xl 24px Pillola, chip grandi
rtds-rounded-full 9999px Circolare — avatar, badge, chip

Classi per lato specifico

Le stesse varianti sono disponibili per angoli specifici:

Pattern Angoli
rtds-rounded-t-{size} Top-left + Top-right
rtds-rounded-b-{size} Bottom-left + Bottom-right
rtds-rounded-l-{size} Top-left + Bottom-left
rtds-rounded-r-{size} Top-right + Bottom-right
rtds-rounded-tl-{size} Top-left
rtds-rounded-tr-{size} Top-right
rtds-rounded-bl-{size} Bottom-left
rtds-rounded-br-{size} Bottom-right

Esempi

<!-- Pulsante standard -->
<button class="rtds-rounded rtds-px-4 rtds-py-2">Azione</button>

<!-- Avatar circolare -->
<img class="rtds-rounded-full rtds-w-14 rtds-h-14" src="..." alt="">

<!-- Chip -->
<span class="rtds-rounded-2xl rtds-px-3 rtds-py-1">Tag</span>

<!-- Card con solo angoli superiori arrotondati -->
<div class="rtds-rounded-t-lg">...</div>