How to handle border and background in compose shape?

Question

In the code the image border only on the sides, not on the corners. for the button, the background goes out of the shape/border. I only managed to "fix" the button by using a fixed height but I don't understand why a fixed height help and I wonder if there is another way to do this.

@Composable
fun Test(){
    Column(modifier = Modifier.padding(5.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_close),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)
                .border(1.dp, Color.Red)
                .size(20.dp)
        )
        OutlinedButton(
            onClick = {  },
            border = BorderStroke(1.dp, Color.Red),
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .clip(RoundedCornerShape(5.dp))
                .fillMaxWidth()
                .background(Color.Green)
        ) {}
    }
}

Answer 1

For the Image, remove the clip modifier and use the shape inside the border parameter:

    Image(
        painter = painterResource(id = R.drawable.ic_xxx),
        contentDescription = null,
        modifier = Modifier
            //.clip(CircleShape)
            .border(1.dp, Color.Red, CircleShape)
            .size(20.dp)
    )

For the OutlinedButton use the colors attribute to assign the background color instead of the Modifier.background

    OutlinedButton(
        onClick = {  },
        border = BorderStroke(1.dp, Color.Red),
        shape = RoundedCornerShape(5.dp),
        modifier = Modifier
            //.clip(RoundedCornerShape(5.dp))
            .fillMaxWidth(),
            //.background(Color.Green),
        colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Green),
    )