Roundness

    Ignite UI for Angular allows you to customize the shape of components by adjusting their roundness using a value between 0 and 1.

    Overview

    Many Ignite UI components have predefined minimum and maximum border-radius values, which can be adjusted using the --ig-radius-factor CSS variable.

    When you set --ig-radius-factor to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded.

    Here is a list of the components that have predefined minimum and maximum border-radius values and can be modified using the --ig-radius-factor variable:
    • Action Strip • Button • Button Group • Calendar • Card • Carousel • Checkbox • Chip • Combo • Date Picker • Date Range Picker • Grid • Input Group • Linear Progress • List • Month Picker • Navigation Drawer • Radio • Ripple • Snackbar • Switch • Toast

    Usage

    To switch between the two border-radius values on a component, target the element selector and simply set the --ig-radius-factor variable to either 0 or 1:

    igx-chip {
   --ig-radius-factor: 0;
}

    This will apply the minimum predefined border-radius, resulting in the Chip component having straight corners.

    igx-chip {
    --ig-radius-factor: 1;
}

    And by setting the value to 1, the maximum predefined border-radius is applied, resulting in rounded corners for the Chip component.

    If you want the border-radius to be somewhere between the defined minimum and maximum values, you can set the --ig-radius-factor variable to a decimal value between 0 and 1. For example, setting it to 0.5 will apply a border-radius that is 50% of the component's maximum allowed value.

    igx-chip {
    --ig-radius-factor: 0.5;
}

    You can see the difference between the minimum and maximum border-radius values in the example below:

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.