---
title: "border"
description: "Modify element to add border with appearance specified with a [border] and a [shape] and clip it."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.border(border: BorderStroke, shape: Shape = RectangleShape) =
    border(width = border.width, brush = border.brush, shape = shape)
```


Modify element to add border with appearance specified with a `border` and a `shape` and clip it.

#### Parameters

| | |
| --- | --- |
| border | `BorderStroke` class that specifies border appearance, such as size and color |
| shape | shape of the border |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape) =
    border(width, SolidColor(color), shape)
```


Modify element to add border with appearance specified with a `width`, a `color` and a `shape`
and clip it.

#### Parameters

| | |
| --- | --- |
| width | width of the border. Use `Dp.Hairline` for a hairline border. |
| color | color to paint the border with |
| shape | shape of the border |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.border(width: Dp, brush: Brush, shape: Shape) =
    this then BorderModifierNodeElement(width, brush, shape)
```


Modify element to add border with appearance specified with a `width`, a `brush` and a `shape`
and clip it.

#### Parameters

| | |
| --- | --- |
| width | width of the border. Use `Dp.Hairline` for a hairline border. |
| brush | brush to paint the border with |
| shape | shape of the border |




## Code Examples
### BorderSample
```kotlin
@Composable
fun BorderSample() {
    Text("Text with  square border", modifier = Modifier.border(4.dp, Color.Magenta).padding(10.dp))
}
```
### BorderSampleWithBrush
```kotlin
@Composable
fun BorderSampleWithBrush() {
    val gradientBrush =
        Brush.horizontalGradient(
            colors = listOf(Color.Red, Color.Blue, Color.Green),
            startX = 0.0f,
            endX = 500.0f,
            tileMode = TileMode.Repeated,
        )
    Text(
        "Text with gradient border",
        modifier =
            Modifier.border(width = 2.dp, brush = gradientBrush, shape = CircleShape).padding(10.dp),
    )
}
```
### BorderSampleWithDataClass
```kotlin
@Composable
fun BorderSampleWithDataClass() {
    Text(
        "Text with gradient border",
        modifier =
            Modifier.border(border = BorderStroke(2.dp, Color.Blue), shape = CutCornerShape(8.dp))
                .padding(10.dp),
    )
}
```
### BorderSampleWithDynamicData
```kotlin
@Composable
fun BorderSampleWithDynamicData() {
    val widthRange = (1..10)
    var width by remember { mutableStateOf((widthRange.random()).dp) }
    val shapes = remember { listOf(CutCornerShape(8.dp), CircleShape, RoundedCornerShape(20)) }
    var selectedShape by remember { mutableStateOf(shapes.random()) }
    val colors =
        listOf(
            Color.Black,
            Color.DarkGray,
            Color.Gray,
            Color.LightGray,
            Color.White,
            Color.Red,
            Color.Blue,
            Color.Green,
            Color.Yellow,
            Color.Cyan,
            Color.Magenta,
        )
    var gradientBrush by remember {
        mutableStateOf(
            Brush.horizontalGradient(
                colors = listOf(colors.random(), colors.random(), colors.random()),
                startX = 0.0f,
                endX = 500.0f,
                tileMode = TileMode.Repeated,
            )
        )
    }
    Column(Modifier.padding(2.dp)) {
        Text(text = "Update border with buttons")
        Row {
            Button(
                modifier = Modifier.width(60.dp),
                onClick = { width = (widthRange.random()).dp },
            ) {
                Text(fontSize = 8.sp, text = "width")
            }
            Button(
                modifier = Modifier.width(60.dp),
                onClick = {
                    gradientBrush =
                        Brush.horizontalGradient(
                            colors = listOf(colors.random(), colors.random(), colors.random()),
                            startX = 0.0f,
                            endX = 500.0f,
                            tileMode = TileMode.Repeated,
                        )
                },
            ) {
                Text(fontSize = 8.sp, text = "brush")
            }
            Button(
                modifier = Modifier.width(60.dp),
                onClick = { selectedShape = shapes.random() },
            ) {
                Text(fontSize = 8.sp, text = "shape")
            }
        }
        Text(
            "Dynamic border",
            modifier =
                Modifier.border(width = width, brush = gradientBrush, shape = selectedShape)
                    .padding(10.dp),
        )
    }
}
```