Shapes & Clipping

Rounded, circle, and cut-corner clips

Shapes define an outline used for clipping and backgrounds. RoundedCornerShape softens corners, CircleShape produces a pill or circle, and CutCornerShape bevels them. Apply with Modifier.clip then paint with a background.

View source Material docs All components

Shapes & Clipping demos rendered in Compose Playground — Pixel-accurate preview · light theme

Clip outlines

The same colored box clipped three different ways.

Box(
    Modifier.size(80.dp).clip(RoundedCornerShape(20.dp))
        .background(MaterialTheme.colorScheme.primary)
)
Box(
    Modifier.size(80.dp).clip(CircleShape)
        .background(MaterialTheme.colorScheme.secondary)
)
Box(
    Modifier.size(80.dp).clip(CutCornerShape(20.dp))
        .background(MaterialTheme.colorScheme.tertiary)
)

Examples

Related components