How on earth do you reason about order of Jetpack Compose modifiers?

I get that Jetpack Compose operates from the outside in for modifiers, but what about this one?

What I asked for:

• 8 dp padding
• then 2 dp border
• then background colour for component
• then 16 dp padding

@Composable
fun App() {
    MaterialTheme(colors = darkColors()) {
        Surface(
            modifier = Modifier
                .background(MaterialTheme.colors.background)
                .fillMaxSize()
                .padding(8.dp)
        ) {
            Column {
                Card(
                    modifier = Modifier
                        .requiredSize(DpSize(300.dp, 200.dp))
                        .border(BorderStroke(2.dp, Color.White), RoundedCornerShape(8.dp))
                        .background(MaterialTheme.colors.surface)
                        .padding(16.dp)
                ) {
                    // Content still to come
                }
            }
        }
    }
}

What I got:

• 8 dp padding
• then 2 dp border
• --then 16 dp padding--
• --then background colour for component--

How do I reason about the background colour not extending to the border here? I defined it immediately after.

Addendum:

By the way, swap border and background - same result: