how can i draw the different sides of a border wit...

# compose

[Alex Styl]

how can i draw the different sides of a border with a different color? I would like to draw the top and left sides a different color to the right and bottom.

this is fairly easy to do with design tools (such as figma).

[Oleksandr Balan]

I think you could mimic it with several background modifiers, something like that:

@Preview
@Composable
fun BordersPreview() {
    val borderWidth = 8.dp
    val borderShape = RectangleShape
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Cyan, borderShape)
            .padding(start = borderWidth, top = borderWidth)
            .background(Color.Yellow, borderShape)
            .padding(end = borderWidth, bottom = borderWidth)
            .background(Color.White, borderShape)
    )
}

[Oleksandr Balan]

With rounded corner shape it looks weird, but cool as for me 😅

[Alex Styl]

wow. impressed you can do that