How to Create Rounded Border Button Using Jetpack Compose

I need to add border with rounded corner in Button using Jetpack Compose

Like :

6 Answers

To achieve a button with a border with rounded corners you can use the OutlinedButton component applying in the shape parameter a RoundedCornerShape:

OutlinedButton(
    onClick = { },
    border = BorderStroke(1.dp, Color.Red),
    shape = RoundedCornerShape(50), // = 50% percent
                                    // or shape = CircleShape
    colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Red)
){
    Text( text = "Save" )
}

It works with M2 and M3.

5

Just use modifier as:

modifier = Modifier.border( width = 2.dp,
                            color = Color.Red,
                            shape = RoundedCornerShape(5.dp))

use Clip Modifier, plus you can also choose a specific corner to curve

 modifier = Modifier.clip(RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))

Use the clip Modifier.

Modifier.clip(CircleShape)

This is the button you have in that image :

Button(
       onClick = {},
       shape = RoundedCornerShape(23.dp),
       border = BorderStroke(3.dp, Color.Red),
       colors = ButtonDefaults.buttonColors(contentColor = Color.Red, backgroundColor = Color.White)
       ) {
            Text(
                text = "Save",
                fontSize = 17.sp,
                modifier = Modifier.padding(horizontal = 30.dp, vertical = 6.dp)
            )
        }
1

Try this

               Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                        .padding(4.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(Color.White)
                        .border(
                            1.dp,
                            Color.RED,
                            shape = RoundedCornerShape(8.dp),
                        )

                ) {
                    Text(
                        modifier = Modifier.align(Alignment.Center),
                        text = "Save",
                        color = Color.RED,
                        style = MaterialTheme.typography.h6
                    )
                }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Elena Rostova

Elena Rostova

Lead Health, Wellness & Medical Journalist

Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.

Share this article
Twitter Facebook Pinterest