A modern programming language that makes developers happier.

kotlinlang

Screenshot 2022-10-05 at 13.08.29.png

Screenshot 2022-10-05 at 13.09.06.png

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

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

```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 -&gt; MaterialTheme.colors.Action
            else -&gt; 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
        )
    }
}```


Yeap, or you could you `Surface` directly.

Which basically passes the shape to the `.border` modifier for you :point_down:
```&gt; Surface.kt

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

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

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

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

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