Ripple with rounded corners Jetpack Compose

Starting with M2 1.0.0-beta08 you can solve this issue using the onClick lambda parameter in the Card instead of the clickable modifier:

Card(
    shape = RoundedCornerShape(30.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp),
    onClick = { show = !show }
){
  //card content
} 

If you need the clickable or the combinedClickable modifier you have to use the variant without the onClick parameter and to apply also the clip modifier to the Card using the same Card shape:

val shape = RoundedCornerShape(30.dp)

Card(
    shape = shape,
    modifier = Modifier
        //...height, width, padding
        .clip(shape)
        .combinedClickable(
            onLongClick =  { /** do something */ },
            onClick = { /** do something */ }
        )
){
   //card content
}

With M3 Card you can do the same.

Until 1.0.0-beta07 applying a .clickable modifier to the Card the ripples aren’t clipped by the bounds of the layout.

As workaround you can apply the .clickable modifier to the content of the Card (for example a Box):

    Card(
        shape = RoundedCornerShape(30.dp),
        border = BorderStroke(width = 2.dp, color = Color.Blue),
        backgroundColor = Color.White,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)

    ) {
        Box(Modifier
              .clickable(
                  onClick = { /* ...*/ }
              )
        ){
            Text("Text")
        }
    }