how to remove bootstrap modal underline? - html

Question

when I use the bootstrap's modal like this:
<style>
.modal-content {
border-radius: 60px;
}
</style>
<div id="upload-loading" class="modal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button id="loadingClose" type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload in progress...</h4>
</div>
</div>
</div>
</div>
it shows an underline
I tried to add this style
<style>
.modal-content, .modal-content * {
text-decoration: none !important;
}
</style>
but it doesn't seem to make any difference..

Answer 1

.modal-content {border: 0px solid rgba(0, 0, 0, 0.2);}

Answer 2

Just give border to the class .modal-header
I just solve it in React
<div>
{/* Button trigger modal */}
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
{/* Modal */}
<div className="modal fade" id="exampleModalCenter" tabIndex={-1} role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header" style={{border:"1px solid #fff"}}>
<h5 className="modal-title" id="exampleModalLongTitle">Buy Premium</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<p>Your account is limited to only 3 CV views.
To review more, purchase Premium Subscription</p>
<button className="btn btn-primary">Purchase</button>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>