---
title: "curveToEdge"
description: "A [Modifier] that curves a component to the border of the parent container around the center, always treating the container as a circle."
type: "modifier"
lastmod: "2026-10-07"
---
## API Reference

### curveToEdge

> Source set: Android

```kotlin
public fun Modifier.curveToEdge(
    maxSweepAngle: Float = CurvedTextDefaults.ScrollableContentMaxSweepAngle,
    angularDirection: AngularDirection = AngularDirection.Clockwise,
    anchor: Float = 270f,
    anchorType: AngularAnchorType = AngularAnchorType.Center,
): Modifier
```

A `Modifier` that curves a component to the border of the parent container around the center,
always treating the container as a circle. Useful for circular screens. It draws outside the
bounds of the container, then a shader is applied that calculates and draws the curved content.

If the container is a rectangle, it will be treated as a circle with radius of the height divided
by 2.

Content towards the center of the container will be smaller due to the method of calculating the
curve. This is most apparent in text that runs over one line.

There are currently some limitations: clickable components will have incorrect clickable bounds,
and talkback doesn't highlight components correctly.

Simple example of applying Modifier.curvedToEdge to text:

Example of applying Modifier.curvedToEdge to a long piece of text, with overflow handling:

#### Parameters

| | |
| --- | --- |
| maxSweepAngle | The maximum sweep angle in degrees, `CurvedTextDefaults.ScrollableContentMaxSweepAngle` by default. For screens without scrollable content, `CurvedTextDefaults.StaticContentMaxSweepAngle` may be used instead. |
| angularDirection | Specify the direction of the content. Default is clockwise (so that text appears the correct way up while at the top of the container) |
| anchor | The angle at which the content is laid out relative to, in degrees. An angle of 0 corresponds to the right (3 o'clock on a watch), 90 degrees is bottom (6 o'clock), and so on. Default is 270 degrees (top of the container). |
| anchorType | Specify how the content is drawn with respect to the anchor. Default is to center the content on the anchor. |

## Code Examples

### CurveToEdgeSample

```kotlin
@Sampled
@Composable
fun CurveToEdgeSample() {
    Text("Curved Text", Modifier.curveToEdge())
}
```

### LongCurveToEdgeSample

```kotlin
@Sampled
@Composable
fun LongCurveToEdgeSample() {
    Text(
        "A really long piece of curved text",
        Modifier.curveToEdge(CurvedTextDefaults.StaticContentMaxSweepAngle),
        overflow = TextOverflow.Ellipsis,
        maxLines = 1,
    )
}
```