<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"
}
]
}
Border radius classes