Sibidharan
Sibidharan

Reputation: 2756

Make modal in circle shape

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.

enter image description here

Upvotes: 0

Views: 4389

Answers (2)

danimal
danimal

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

David Wilkinson
David Wilkinson

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

Related Questions