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