Rounded side, not rounded corners

Question

I'd like to create a shape like the one displayed below entirely in CSS. As you can tell, it would take a bit more tweaking than simply applying rounded corners...

shape with rounded bottom side

Can it be done?

css-tricks.com/examples/ShapesOfCSS

Jawad
– Jawad

2013-01-24 18:37:06 +00:00
Commented Jan 24, 2013 at 18:37 — Jawad
– Jawad, Commented Jan 24, 2013 at 18:37
It's still nothing more than applying border-radius.

Ana
– Ana

2013-01-24 19:16:05 +00:00
Commented Jan 24, 2013 at 19:16 — Ana
– Ana, Commented Jan 24, 2013 at 19:16

Margin Right · Accepted Answer · 2013-02-20 15:10:06Z

25

Here is the jsfiddle: http://jsfiddle.net/swqZL/

CSS for element div with class "figure":

.figure {
height: 400px;
width: 200px;
background-color: black;
border-bottom-left-radius: 100%30px;
border-bottom-right-radius: 100%30px;    
}

Horizontal radius 100%, vertical radius 30px

answered Feb 20, 2013 at 15:10

Margin Right

2512 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Petah Over a year ago

It annoys me that this is not symmetrical.

Bram Vanroy Over a year ago

@Petah It is but because it is left-aligned it looks as if it isn't. Here is the centered version: jsfiddle.net/8t76exvo/2

Phire · Accepted Answer · 2013-01-24 18:55:27Z

5

<div style="background: black; 
        width: 300px; 
        height: 450px; 
        padding-top: 50px;">
    <div style="width: 200px; 
            height: 400px; 
            background: white; 
            margin: 0 auto;
            border-radius: 0 0 100px 100px / 0 0 25px 25px;
            -moz-border-radius: 0 0 100px 100px / 0 0 25px 25px;
            -webkit-border-radius: 0 0 100px 100px / 0 0 25px 25px;
            ">
    </div>
</div>

Info on selective oval border-radii found here: http://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/

answered Jan 24, 2013 at 18:55

Phire

3982 silver badges7 bronze badges

3 Comments

Ana Over a year ago

1. Unprefixed poperty should be last, plus these days the prefixed ones aren't needed anymore. 2. Why inline styles? 3. Why two elements? One would do it. Demo dabblet.com/gist/4626553

Phire Over a year ago

1. Good to know! 2. So it can be copied and dropped somewhere without additional mods. 3. I assumed the OP wanted to create the entire image (box with another box inside of it).

Ana Over a year ago

1. Remember caniuse.com - damn useful! 2. Still, that could cause more problems than it solves. 3. Valid point.

Ani Menon · Accepted Answer · 2016-05-07 08:37:36Z

2

Working Snippet:

.border-radius-example {
  width: 125px;
  height: 175px;
  background: #000;
  margin: 20px;
  float: left;
  padding: 5px;
}

#border-radius-bottom {
  -moz-border-radius-bottomleft: 100%35px;
  -webkit-border-bottom-left-radius: 100%35px;
  border-bottom-left-radius: 100%35px;
  -moz-border-radius-bottomright: 100%35px;
  -webkit-border-bottom-right-radius: 100%35px;
  border-bottom-right-radius: 100%35px;
}

<div class='border-radius-example' id='border-radius-bottom'>

</div>

answered May 7, 2016 at 8:37

Ani Menon

28.4k17 gold badges111 silver badges128 bronze badges

1 Comment

Ani Menon Over a year ago

Oh yes.. I was actually answering another question & saw this one had no selected answer so posted the code.

Avi E. Koenig · Accepted Answer · 2021-02-10 10:46:53Z

0

adding to previously answered:

this may add some dynamic value

/****/
border-top-right-radius: 25%40%;
border-top-left-radius: 25%40%;
border-bottom-left-radius:25%40%;
border-bottom-right-radius: 25%40%;
/****/

answered Feb 10, 2021 at 10:46

Avi E. Koenig

3796 silver badges13 bronze badges

Collectives™ on Stack Overflow

Rounded side, not rounded corners

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related