# border

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/border.modifier#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)(border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and clip it. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/border.modifier#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, brush: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and clip it. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/border.modifier#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and clip it. | Cmn |

## Functions

### Modifier.border

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Border.kt+function:border) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

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

Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and clip it.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Text("Text with  square border", modifier = Modifier.border(4.dp, Color.Magenta).padding(10.dp))
```

| Parameters |
|---|---|
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` class that specifies border appearance, such as size and color |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | shape of the border |

### Modifier.border

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Border.kt+function:border) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

```
fun Modifier.border(width: Dp, brush: Brush, shape: Shape): Modifier
```

Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and clip it.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

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),
)
```

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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),
    )
}
```

| Parameters |
|---|---|
| `width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | width of the border. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Hairline()` for a hairline border. |
| `brush: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush` | brush to paint the border with |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | shape of the border |

### Modifier.border

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Border.kt+function:border) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

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

Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and clip it.

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Text(
    "Text with gradient border",
    modifier =
        Modifier.border(border = BorderStroke(2.dp, Color.Blue), shape = CutCornerShape(8.dp))
            .padding(10.dp),
)
```

| Parameters |
|---|---|
| `width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | width of the border. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Hairline()` for a hairline border. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | color to paint the border with |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | shape of the border |