Border Radius
LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.
Choose a Starter Kit
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Quickstart
Get a feel for LiftKit by following along with this short tutorial.
Figure 1. Animation demonstrating state layer implementation.
Overview
Border radius controls the roundness of corners. They draw from LiftKit's global size variables, and have one extra class for making things circular.
Usage
Rounded Edges
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
Perfect circles
For things like profile photos, icon buttons, or decorative elements, combine aspect__1x1 with border-radius__full.
Pill Shapes
Apply border-radius__full by itself.
Multiple Radii
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;
}