Figure 1. Animation demonstrating state layer implementation.
Border radius controls the roundness of corners. They draw from LiftKit's global size variables, and have one extra class for making things circular.
Use classes like .border-radius__xxs or .border-radius__m to control the roundness of element corners. If applying to a div that contains child elements, you may need to also set overflow__hidden to ensure corners display properly
For things like profile photos, icon buttons, or decorative elements, combine aspect__1x1 with border-radius__full.
Apply border-radius__full by itself.
This use case is rare and, when it arises, it's almost always for unique UI components. So, LiftKit recommends just making a component class for the unique instance where you need it. Follow BEM naming conventions.
.border-radius__2xs {
border-radius: var(--xxs);
}
.border-radius__xs {
border-radius: var(--xs);
}
.border-radius__sm {
border-radius: var(--s);
}
.border-radius__md {
border-radius: var(--m);
}
.border-radius__lg {
border-radius: var(--l);
}
.border-radius__xl {
border-radius: var(--xl);
}
.border-radius__2xl {
border-radius: var(--xxl);
}
.border-radius__circle {
border-radius: 100em;
}