How to make antd modal have rounded corners

Question

  <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.

score 8 · Accepted Answer · answered Aug 05 '21 at 20:58

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

answered Aug 05 '21 at 20:58

Anton Komyshan

1,377
10
21

when we add the title top corners are not rounded. how to do that ? – Viraj Dec 31 '21 at 01:40

score 0 · Answer 2 · answered Sep 06 '22 at 05:30

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

How to make antd modal have rounded corners

2 Answers2