---
title: outline
description: A modifier that draws an outline outside a composable's bounds, similar to CSS `outline` property.
---

Unlike Compose's built-in `border` modifier, `outline` does not affect layout or size - it draws purely outside the composable's bounds.

<div id="references">

| Parameter | Description                                                  |
|-----------|--------------------------------------------------------------|
| `width`   | The thickness of the outline                                 |
| `color`   | The color of the outline                                     |
| `shape`   | The shape of the composable (defaults to `RectangleShape`)   |
| `offset`  | Distance between composable and outline (defaults to `0.dp`) |

</div>

## Code Examples

### Basic Example 

Outline requires a `width` and ` color` to render anything around the composable.

The `shape` parameter accepts the shape of the composable you are styling. 

The final shape of the outline will be calculated based of the provided shape, width and offset.


{{unstyled_demo:outline-basic}}

```kotlin
SimpleButton(
    shape = RoundedCornerShape(8.dp),
    modifier = Modifier.outline(
        width = 2.dp,
        color = Color(0xFF3B82F6),
        shape = RoundedCornerShape(8.dp),
    )
)
```

### Customizing Width

You can customize the thickness of the outline by adjusting the `width` parameter.

{{unstyled_demo:outline-width}}

```kotlin
SimpleButton(
    modifier = Modifier.outline(1.dp, Color(0xFF3B82F6), shape = RoundedCornerShape(8.dp))
)
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), shape = RoundedCornerShape(8.dp))
)
SimpleButton(
    modifier = Modifier.outline(4.dp, Color(0xFF3B82F6), shape = RoundedCornerShape(8.dp))
)
```

### Customizing Shape

The outline adapts to different shapes. The `shape` parameter should match the shape of your composable for proper alignment.

Note that generic shapes are not supported and will fail silently.

{{unstyled_demo:outline-shape}}

```kotlin
SimpleButton(
    shape = RectangleShape,
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), shape = RectangleShape)
)
SimpleButton(
    shape = RoundedCornerShape(8.dp),
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), shape = RoundedCornerShape(8.dp))
)
SimpleButton(
    shape = CircleShape,
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), shape = CircleShape)
)
```

### Customizing Offset

The `offset` parameter controls the distance between the composable and its outline, creating a gap effect.

{{unstyled_demo:outline-offset}}

```kotlin
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), offset = 0.dp, shape = RoundedCornerShape(8.dp))
)
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), offset = 4.dp, shape = RoundedCornerShape(8.dp))
)
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFF3B82F6), offset = 8.dp, shape = RoundedCornerShape(8.dp))
)
```

### Customizing Color

You can customize the outline color to match your design system or create visual emphasis.

{{unstyled_demo:outline-color}}

```kotlin
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFFEF4444), offset = 2.dp, shape = RoundedCornerShape(8.dp)) 
)
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFF10B981), offset = 2.dp, shape = RoundedCornerShape(8.dp))
)
SimpleButton(
    modifier = Modifier.outline(2.dp, Color(0xFF8B5CF6), offset = 2.dp, shape = RoundedCornerShape(8.dp))
)
```