{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

BorderKt

public final class BorderKt


Summary

Public methods

static final @NonNull Modifier
border(
    @NonNull Modifier receiver,
    @NonNull BorderStroke border,
    @NonNull Shape shape
)

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

static final @NonNull Modifier
border(
    @NonNull Modifier receiver,
    @NonNull Dp width,
    @NonNull Brush brush,
    @NonNull Shape shape
)

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

static final @NonNull Modifier
border(
    @NonNull Modifier receiver,
    @NonNull Dp width,
    @NonNull Color color,
    @NonNull Shape shape
)

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

Public methods

border

public static final @NonNull Modifier border(
    @NonNull Modifier receiver,
    @NonNull BorderStroke border,
    @NonNull Shape shape
)

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

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.material.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
@NonNull BorderStroke border

BorderStroke class that specifies border appearance, such as size and color

@NonNull Shape shape

shape of the border

border

public static final @NonNull Modifier border(
    @NonNull Modifier receiver,
    @NonNull Dp width,
    @NonNull Brush brush,
    @NonNull Shape shape
)

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

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.material.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)
)

()

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.material.Button
import androidx.compose.material.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
@NonNull Dp width

width of the border. Use Dp.Hairline for a hairline border.

@NonNull Brush brush

brush to paint the border with

@NonNull Shape shape

shape of the border

border

public static final @NonNull Modifier border(
    @NonNull Modifier receiver,
    @NonNull Dp width,
    @NonNull Color color,
    @NonNull Shape shape
)

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

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.material.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
@NonNull Dp width

width of the border. Use Dp.Hairline for a hairline border.

@NonNull Color color

color to paint the border with

@NonNull Shape shape

shape of the border