Border radius
Also called rounded corners or corner radius
The CSS property that rounds an element’s corners, from a slight softening to a full pill or circle.
export function ProjectTile() {
return (
<div className='flex items-start gap-6'>
{/* Inner radius = outer radius - padding, so the curves stay parallel. */}
<article className='w-64 rounded-(--outer) border bg-background p-(--pad) [--outer:20px] [--pad:8px]'>
<img
src='/covers/spring-launch.jpg'
alt=''
className='aspect-video w-full rounded-[calc(var(--outer)-var(--pad))] object-cover'
/>
<div className='flex items-center justify-between p-3'>
<h3 className='font-medium'>Spring launch</h3>
{/* rounded-full turns any box into a pill, or a square into a circle. */}
<span className='rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700'>
Live
</span>
</div>
</article>
{/* A smooth squircle where corner-shape is supported; elsewhere it stays
a plain rounded square. */}
<img
src='/app-icon.png'
alt='Tripmate app icon'
className='size-16 rounded-[30%] [corner-shape:squircle]'
/>
</div>
);
}Standardize corner radius across the app: 6px for inputs and small buttons, 12px for cards, 20px for dialogs, and 9999px for pills and avatars, defined as CSS variables. For nested elements, set the inner radius to the outer radius minus the padding, and use an SVG squircle mask for the app icon so its corners look smooth like iOS icons.
Paste into Layerwise or any AI coding tool.
What is Border radius?
border-radius sets how round each corner is. Small values like 4 to 8px soften buttons and inputs, 12 to 24px give cards a friendly feel, 9999px turns a button into a pill, and 50% makes a square a circle. You can set each corner separately, such as 16px 16px 0 0 for a sheet attached to the bottom of the screen.
Consistency matters more than any single value, so pick a small set of radii and reuse them. When you nest rounded shapes, make the inner radius equal to the outer radius minus the padding between them, so the curves stay parallel.
A CSS rounded corner is a quarter circle, so the curve starts abruptly where it meets the straight edge. Apple’s app icons and many design tools use a smoother shape often called a squircle, whose curve eases in gradually. The newer CSS corner-shape property is not supported in every browser yet, so sites usually draw squircles as an SVG path or mask.
Related terms
All termsCard
A bordered, rounded container that groups one item’s image, title, details, and actions so it can sit in a list or grid with others.
Claymorphism
A playful UI style with puffy, rounded shapes that look like soft clay, made with large radii and layered inner and outer shadows.
Button variants
A set of button styles, such as primary, secondary, outline, ghost, destructive, and link, that shows which action on a screen matters most.
Flat design
A design style that uses solid colors, simple shapes, and clean type, with no gradients, textures, or realistic shadows.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.