Make modal in circle shape

Question

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.

border-radius: 100% with equal width and height should do it — danimal, Jun 09 '16 at 11:53
Possible duplicate of [How to draw circle in html page?](http://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page) — jmattheis, Jun 09 '16 at 11:54
@Sibidharan a model is just a html tag (with content) which you can style — jmattheis, Jun 09 '16 at 11:57

score 5 · Accepted Answer · answered Jun 09 '16 at 11:59

5

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.

answered Jun 09 '16 at 11:59

David Wilkinson

5,060
1
18
32

It looks satisfying. I will mark as correct after implementing out :) – Sibidharan Jun 09 '16 at 12:00
1

@Sibidharan No problem, happy to help. You'll need to tweak it of course but it gives you a base to build on. – David Wilkinson Jun 09 '16 at 12:01
Sure, I got it.. I can tweak it to fit the text as I like :) – Sibidharan Jun 09 '16 at 12:02
1

@Sibidharan Remember to mark an answer as correct if it helps you out - it may help others in the future :-) – David Wilkinson Jun 10 '16 at 09:10
It helped me! It perfectly worked after doing few alignment tweaks!! – Sibidharan Jun 10 '16 at 09:50

score 1 · Answer 2 · answered Jun 09 '16 at 11:59

1

HTML

      <div class="modal-body rounded">
        <p>Some text in the modal.</p>
      </div>

CSS

.rounded {border-radius: 100%; width: 500px; height: 500px;}

answered Jun 09 '16 at 11:59

danimal

1,567
13
16

Make modal in circle shape

2 Answers2