How to "cut" elements according to the border-radius of div

Question

I have this code for this picture:

CSS:

section.content {
    min-height: 500px;
    width: 73%;
    float: right;
    margin-bottom:0px;
    padding: 5px;
    background: white;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomright: 100px;
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
}

#map {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    background: #F6F6F6;
    border-radius: 4px;
}

HTML:

<section class="content" id="contentContact">
    <div id="map"></div>
    <form id="contactForm" /></form>
</section>

border-radius div

Then, I Want "cutting" elements according to the border-radius of div and not out of div. I hope I have explained! Thanks!

not positive what the question is but usually google maps are rendered as iframes so any thing you want done to the map you'll probably have to do #map iframe as the css selector. — Rooster, Jul 24 '12 at 22:30

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

Just add this to your CSS for the outer or parent div that has the rounded corners.

overflow:hidden

For the google map it's not as easy.

Have a look at a few different options:

http://maps.forum.nu/temp/gm_rounded_corners.html

Is there any trick to put rounded corners on a Google map?

Transparent rounded corners on Google Map

edited May 23 '17 at 12:01

Community

1
1

answered Jul 24 '12 at 22:27

Moin Zaman

25,281
6
70
74

score 1 · Accepted Answer · answered Jul 24 '12 at 22:41

1

Set border-radius to iframe elements.

Here is an example in jsFiddle

answered Jul 24 '12 at 22:41

skmasq

4,470
6
42
77

score 0 · Answer 3 · answered Nov 24 '14 at 20:29

0

Make css for all inner elements (child elements):

opacity:0.99;

or any opacity < 1.

answered Nov 24 '14 at 20:29

kirtan-shah

405
7
21

How to "cut" elements according to the border-radius of div

3 Answers3