Jetpack ComposeのModifier.borderを綺麗に適用する

Modifier.border で簡単に枠線を引くことができますが、そのまま使うと境界が滲みます。
結論から言うと、枠線の太さと同じだけコンテンツ側に padding を入れると境界の滲みがなくなり綺麗になります。

実装例

例えば背景色+枠線をつける実装を素直にすると以下のようになると思いますが、

val shape = CircleShape
Box(
    modifier = Modifier
        .clip(shape)
        .size(120.dp)
        .background(Color.Red)
        .border(1.dp, MaterialTheme.colorScheme.outline, shape),
) {
}

この場合枠線の外側に少しだけ背景色がはみ出るので境界が滲みます。

スクショ	拡大

これを回避するには枠線の太さと同じだけコンテンツ側に padding を入れると綺麗になります。
先ほどの例だと背景色部分と枠線部分を分離してネストさせ、padding を適用することで綺麗に枠線を適用することができます。

val shape = CircleShape
val borderWidth = 1.dp
Box(
    modifier = Modifier
        .size(120.dp)
        .border(borderWidth, MaterialTheme.colorScheme.outline, shape),
) {
    Box(
        modifier = Modifier
            .matchParentSize()
            .padding(borderWidth)
            .clip(shape)
            .background(Color.Red),
    ) {
    }
}

スクショ	拡大

画像の場合

具体的な例だとアイコン画像のような画像に枠線をつけたい場合が多いと思います。
この場合も同様に padding をつけるといいのですが、枠線と画像でネストさせてもいいですし、Modifier の順番を気をつけることでネストなしでも適用することができます。
border -> padding -> clip とすることでネストなしで枠線を綺麗に適用することができます。

val shape = CircleShape
val borderWidth = 1.dp
Image(
    painter = painterResource(R.drawable.sample),
    contentDescription = null,
    modifier = Modifier
        .size(120.dp)
        .border(borderWidth, MaterialTheme.colorScheme.outline, shape)
        .padding(borderWidth)
        .clip(shape)
)

スクショ	拡大