Rounded

Learn how to set and customize the border radius of your theme.

Adjust the border radius of your components using the data-rounded attribute. Start with importing and adding the rounded plugin to your config’s plugins array

<html data-rounded="xlarge" >

Rounded corners

The data-rounded attribute accepts the following values:

none

 
<html data-rounded="none" >

default

 
<html data-rounded="default" >

small

 
<html data-rounded="small" >

medium

 
<html data-rounded="medium" >

large

 
<html data-rounded="large" >

xlarge

 
<html data-rounded="xlarge" >

2xlarge

 
<html data-rounded="2xlarge" >

3xlarge

 
<html data-rounded="3xlarge" >

full

 
<html data-rounded="full" >

Adding rounded corners to a specific component

You can add the data-rounded attribute to any component to apply a different border radius to that specific component.

 
<html data-rounded="xlarge" >
    <head> </head>
    <body>
        <main>
            <div class="grid grid-cols-4 gap-3">
                <div>Theme rounded</div>
                <div>Theme rounded</div>
                <div>Theme rounded</div>
                <div data-rounded="3xlarge">3xlarge</div>
            </div>
        </main>
    </body>
</html>

Customization

You have the flexibility to modify an existing data-rounded or even bypass all the default altogether. This can be achieved by assigning new values to the CSS variables that control border radius.

Customizing a data-rounded

Choose a data-rounded to customize, then define its CSS variables within the @layer base block in your CSS file.

@layer base {
    [data-rounded="xlarge"] {
        --card-radius: theme(borderRadius.xl);

        --btn-radius: theme(borderRadius.lg);
        --badge-radius: var(--btn-radius);
        --input-radius: var(--btn-radius);

        --avatar-radius: theme(borderRadius.full);
        --annonce-radius: theme(borderRadius.full);
    }
}

default border radius

Define the radius CSS variables in your CSS file by assigning them values within the :root selector. Make sure to place these definitions inside the @layer base block for proper layering.

@layer base {
    :root {
        --card-radius: theme(borderRadius.2xl);

        --btn-radius: theme(borderRadius.md);
        --badge-radius: var(--btn-radius);
        --input-radius: var(--btn-radius);

        --avatar-radius: theme(borderRadius.full);
        --annonce-radius: theme(borderRadius.full);
    }
}

Utilities

Custom utilities for applying border radius

<div class="rounded-card">
<img class="rounded-avatar" src=""/>
<div class="rounded-annonce"/>,
<button class="rounded-btn" />,
<span class="rounded-badge"/>
<input class="rounded-input" />