Border Radius

Understand how to use the border-radius property to modify the component's border radius

Modify border radius

You can modify the current border radius by changing the borderRadius property.

module.exports = {
    ...,
    content: [
        "./node_modules/@andore-ui/**/*.{js,ts,jsx,tsx}",
    ],
    plugins: [
        require('@andore-ui/theme')({
            theme: {
                borderRadius: {
                    "none": "0",
                    "sm": "0.25rem",
                    "lg": "0.75rem",
                }
            }
        }),
    ],
};

How does it work?

The theme system uses the borderRadius property to define the border radius of the components. All components depend on this property to define the border radius, if we change the value of this property, all components will be affected.

For example, let's modify the border radius of this component:

Border radius tokens

The following table lists all the border radius tokens available in the theme system.