CODEWITHSUNDEEP
css
Naomi
Naomi

Reputation: 1296

Curved bottom on div

I have a div that I want to have a curved bottom border. Similar to the image but not on the top. I've tried using border-radius but it doesn't seem to create a curved bottom. Any idea how to do this without using a background image.

enter image description here

Upvotes: 2

Views: 5127

Answers (3)

Johannes
Johannes

Reputation: 67778

You can combine two values each for the border-radius in the different corners as shown in my snippet below:

.x {
width: 240px;
height: 120px;
background: #fa0;
border-bottom-left-radius: 120px 40px;
border-bottom-right-radius: 120px 40px;

}
<div class="x"></div>

Upvotes: 7

Martins
Martins

Reputation: 508

Yeah, how about creating two div, one inside the other, then you style them like this:

<style>
    .outer{
        width:1000px;
        height:100px;
        border-radius:100%;
    }
    .inner{
        width:100px;
        height:100px;
        background:gold;
        overflow:hidden;
    }
</style>

<div class="outer">
    <div class="inner"></div>
</div>

You get the point, right?

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

You are searching something like that?

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-bottom-left-radius: 100px 40px;
  border-bottom-right-radius: 100px 40px;
}
<div id="tv"></div>

Upvotes: 3

Related Questions