is this not the way to create this element? ```Box( contentAlignment = Alignment.Center, mod...

# compose

[oday]

is this not the way to create this element?

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .clip(RoundedCornerShape(10.dp))
        .border(BorderStroke(2.dp, Color.Red))
        .padding(10.dp),
) {
    Text(
        text = filter.name,
        color = MaterialTheme.colors.Action,
    )
}

output is this, the edges are cutting of for some reason

[Oleksandr Balan]

You should pass the shape to the .border() modifier. Also I think .clip() is not needed in this case.

[oday]

Surface(
    modifier = Modifier
        .widthIn(0.dp, 144.dp)
        .width(100.dp),
    elevation = 8.dp,
    shape = RoundedCornerShape(15.dp),
    color = MaterialTheme.colors.Action.copy(alpha = 0.2f),
    border = BorderStroke(
        width = 1.dp,
        color = when {
            selected -> MaterialTheme.colors.Action
            else -> MaterialTheme.colors.ForegroundMuted
        }
    )
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center
    ) {
        Text(
            modifier = Modifier
                .padding(8.dp),
            text = filter.name,
            color = MaterialTheme.colors.Action,
            textAlign = TextAlign.Center
        )

        Image(
            painter = if (filter.enabled.value)
                painterResource(id = R.drawable.ic_chevron_down_blue)
            else
                painterResource(id = R.drawable.ic_chevron_down_gray),
            contentDescription = null
        )
    }
}

[Oleksandr Balan]

Yeap, or you could you Surface directly.

Which basically passes the shape to the .border modifier for you 👇

> Surface.kt

Box(
    modifier
        .then(if (border != null) Modifier.border(border, shape) else Modifier)
         ...
) {
    content()
}

[oday]

do you see that discolored patch in the middle of the chip above?

[oday]

i thought it was just a visual thing, turns out no it appears in the app as well

[oday]

what is that

[Oleksandr Balan]

I think that is due to semi-transparent background and non-zero elevation. Do you need an elevation for that element?

[oday]

that is a good catch! no I don’t

[oday]

nice

[jasu]

if i’m not wrong, border takes stroke and shape. You’re not passing shape that’s why it’s happening. Try to pass the same shape as clip into border, it should work