Reputation: 2756
I want to create a modal in circle shape instead of the regular rectangle with rounded corners. So it should look something like just a round with the modal-body
in middle, no modal-header
and no modal-footer
.
This is with modal to make sure how it works, instead of regular html circle.
I just want it to look like this.
Upvotes: 0
Views: 4389
Reputation: 1697
HTML
<div class="modal-body rounded">
<p>Some text in the modal.</p>
</div>
CSS
.rounded {border-radius: 100%; width: 500px; height: 500px;}
Upvotes: 1
Reputation: 5118
You'll need to experiment with the location of the content within the modal, but here's a working example I've just made using border-radius
: https://jsfiddle.net/2ahhsa4a/1/
.modal-content {
border-radius: 50%;
width: 600px;
height: 600px;
border: 15px solid #000;
}
You'll notice I've used fixed width
/ height
for the modal, this is to ensure it is a perfect circle when combined with border-radius
for this example.
Upvotes: 5