<div class="p-6">
<div>
<h1 class="text-2xl font-bold">Border radius</h1>
<p>Base demo for border radius utilities.</p>
</div>
<div class="flex gap-8 p-6 flex-wrap">
<div class="grid gap-">
<h2 class="text-lg"><strong>0px</strong></h2>
<p>rounded-none</p>
<div class="w-20 h-20 n7-background-03 rounded-none">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>2px</strong></h2>
<p>rounded-sm</p>
<div class="w-20 h-20 n7-background-03 rounded-sm">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>4px</strong></h2>
<p>rounded</p>
<div class="w-20 h-20 n7-background-03 rounded">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>6px</strong></h2>
<p>rounded-md</p>
<div class="w-20 h-20 n7-background-03 rounded-md">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>8px</strong></h2>
<p>rounded-lg</p>
<div class="w-20 h-20 n7-background-03 rounded-lg">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>12px</strong></h2>
<p>rounded-xl</p>
<div class="w-20 h-20 n7-background-03 rounded-xl">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>16px</strong></h2>
<p>rounded-2xl</p>
<div class="w-20 h-20 n7-background-03 rounded-2xl">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>24px</strong></h2>
<p>rounded-3xl</p>
<div class="w-20 h-20 n7-background-03 rounded-3xl">
</div>
</div>
<div class="grid gap-">
<h2 class="text-lg"><strong>50%</strong></h2>
<p>rounded-full</p>
<div class="w-20 h-20 n7-background-03 rounded-full">
</div>
</div>
</div>
</div>
<div class="p-6">
<div>
<h1 class="text-2xl font-bold">Border radius</h1>
<p>Base demo for border radius utilities.</p>
</div>
<div class="flex gap-8 p-6 flex-wrap">
{% for rborder in rborders %}
<div class="grid gap-">
<h2 class="text-lg"><strong>{{ rborder.name }}</strong></h2>
<p>{{ rborder.class }}</p>
<div class="w-20 h-20 n7-background-03 {{ rborder.class }}">
</div>
</div>
{% endfor %}
</div>
</div>
{
"rborders": [
{
"name": "0px",
"class": "rounded-none"
},
{
"name": "2px",
"class": "rounded-sm"
},
{
"name": "4px",
"class": "rounded"
},
{
"name": "6px",
"class": "rounded-md"
},
{
"name": "8px",
"class": "rounded-lg"
},
{
"name": "12px",
"class": "rounded-xl"
},
{
"name": "16px",
"class": "rounded-2xl"
},
{
"name": "24px",
"class": "rounded-3xl"
},
{
"name": "50%",
"class": "rounded-full"
}
]
}
Border radius classes