How to set border radius in dialogue material ui?

Question

how can i set a border radius in dialogue material ui? this image is pop up dialogue that represent a button. i want to set border radius on this pop up dialogue for styling. i try to insert borderRadius in sx, but it doesn`t work

here`s my code

          <Dialog
            open={Boolean(open)}
           
            sx={{
              backdropFilter: "blur(5px) sepia(5%)",
            }}
            
            //onMouseOutCapture={()=> setOpen(false)}
              >

            <Popover
              open={Boolean(open)}
              anchorEl={open}
              anchorOrigin={{
                vertical: 'center',
                horizontal: 'left',
              }}
              transformOrigin={{
                vertical : 'center',
                horizontal : 'left',
              }}
              >
                
                <BoxContainer2
                  onMouseLeave={() => setOpen(null)}
                  >
                  
                  <Button
                    sx={{
                      width:"100%",
                      borderRadius:10,
                      "&:hover":{
                        //border: "1px solid #00FF00",
                        //color: "gray",
                        backgroundColor: "white",

                        //opacity: 0,
                      }
                    }}>
                    tes
                  </Button>
                
                </BoxContainer2>
              
                
            </Popover>

          </Dialog>

Answer 1

Assuming that the goal is to set border radius for the Dialog modal, since this component internally uses Paper for the modal content, perhaps try pass a sx style in the property PaperProps to style the modal.

Tested below example in here: stackblitz

<Dialog
  open={Boolean(open)}
  sx={{
    backdropFilter: "blur(5px) sepia(5%)",
  }}
  // 👇 Props passed to Paper (modal content)
  PaperProps={{ sx: { borderRadius: "50px" } }}
>
...

If for some reason this does not work, another option could be to try style the nested class name .MuiDialog-paper, which would also target Paper:

<Dialog
  open={Boolean(open)}
  sx={{
    backdropFilter: "blur(5px) sepia(5%)",
    // 👇 Another option to style Paper
    "& .MuiDialog-paper": {
      borderRadius: "50px",
    },
  }}
>
...