Documentation
ChevronDown

--aura-input-radius

Default border radius for input.

CSS
Copy Copy
*:root {
    --aura-input-radius: 13px;
}

--aura-input-radius is a CSS custom property that specifies the border radius of inputs in a design system. The value of --aura-input-radius can be applied to the input, select, and textarea HTML elements to set their border radius.

In the CSS file, the custom property can be used as follows:

CSS
Copy Copy
input, 
select, 
textarea {
    border-radius: var(--aura-input-radius);
}

By using the --aura-input-radius custom property, the border radius of inputs can be easily changed and updated in one place, which helps maintain consistency and makes updates more manageable. Additionally, because the border radius is specified using a custom property, any changes made to --aura-input-radius will be reflected in the border radius of the input, select, and textarea elements.