CODEWITHSUNDEEP
css
Jnsn_
Jnsn_

Reputation: 155

CSS: Rectangle side to round inside

How can I create the rounded side (not corner) to round inside? I've thought about placing a white circle over it but then I figure there must be a cleaner way.

I tried this but it round outwards:

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
}

It should look like this:

enter image description here

Upvotes: 1

Views: 3121

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Well frankly i think we need to use another div to make it because its not possible to curve a div like this with css

Please refer the code below:

HTML

<div class="box">
    <div class="box1">
    </div>  
</div>

CSS

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
    position:relative;
}
.box1 {
    background: white none repeat scroll 0 0;
    border-radius: 50% / 0.75em;
    bottom: -1px;
    height: 2em;
    position: absolute;
    width: 30em;
}

Here is a fiddle example for the above code its working fine :)

Upvotes: 2

Related Questions