5
  <Modal
    title=""
    visible={isModalVisible}
    onOk={handleOk}
    onCancel={handleCancel}
    cancelButtonProps={{ style: { display: "none" } }}
  >
    <img src="./test.svg" alt="" style={{ marginLeft: "8.5rem" }} />
    <p>It has been added!</p>
  </Modal>

I tried added style to the Modal,

style ={{borderRadius:"20px",overflow:"auto"}}

But that made on the top corners rounded and cutting off the bottom.

2 Answers 2

8

Just overrider .ant-modal-content style in css/sass/scss file

/*your selectors if needed*/
.ant-modal-content {
  border-radius: 20px;
  /* background: red; */
}

Example: https://codesandbox.io/s/antd-reproduction-template-forked-qqe5k?file=/index.css:27-127

1
  • when we add the title top corners are not rounded. how to do that ?
    – Viraj
    Dec 31, 2021 at 1:40
0

You need to overwrite both .ant-modal and .ant-modal-content following way:

.ant-modal {
  border-radius: 20px;
  /* Only border-radius here */
}

.ant-modal-content {
  border-radius: 20px;
  /* border: 10px solid black; */
}

That way you get both corners rounded

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.