How can I make an outside border in compose just like CSS? It's not easy to make a semi-transparent ...

# compose

[Konyaco]

How can I make an outside border in compose just like CSS? It's not easy to make a semi-transparent outside border that do not cover content by using Modifier.border()

[czuckie]

As in a border that increases the size of what it's bordering?

I assume that won't be possible, though drawing outside of the bounds of the composable would be with one of the drawContent modifier methods, but the size of the composable won't be changed by that.

[Konyaco]

It's better that the border does not participate in layout measuring.
It's a good way to use drawContent() , but If I want to use border radius.... It might be too complicated.

[Stylianos Gakis]

This thread is what you want to read probably. https://kotlinlang.slack.com/archives/CJLTWPH7S/p1684159816431849?thread_ts=1661351651.530739&cid=CJLTWPH7S
By default, border draws inside the content.
If you want it to draw outside, you’d need to enlarge the content by [border size * 2], and then add the border.
You’ll get the same UI, albeit the component will take some extra space.
Otherwise you’ll have to do some tricks to draw outside the content size itself.
Maybe this message and specifically the .graphicsLayer{ compositingStrategy = CompositingStrategy.Offscreen } is something that you can leverage? I haven’t tried myself so idk how exactly it’d be done.

[Stylianos Gakis]

The border radius can be just 1.dp and if you get a density instance (or inside a DrawScope I think you get it by default) you can turn it into pixels by doing 1.dp.roundToPx()

[Konyaco]

Thank you, I'll take a try.

[Stylianos Gakis]

Chris, regarding

I assume that won’t be possible, though drawing outside of the bounds of the composable would be with one of the drawContent modifier methods, but the size of the composable won’t be changed by that.

Would that just work without needing to do stuff like compositingStrategy = CompositingStrategy.Offscreen?
In the draw scope can you just draw outside the bounds and have it work as you’d expect?