Rounded side, not rounded corners

css rounded-corners css-shapes
user2008567 picture user2008567 · Jan 24, 2013 · Viewed 19.9k times · Source

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?

Answer

Margin Right picture Margin Right · Feb 20, 2013

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

Related questions

CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

Edit - Original Title: Is there an alternative way to achieve border-collapse:collapse in CSS (in order to have a collapsed, rounded corner table)? Since it turns out that simply getting the table's borders to collapse does not solve the …

Read More
Rounded table corners CSS only

I have searched and searched, but haven't been able to find a solution for my requirement. I have a plain ol' HTML table. I want round corners for it, without using images or JS, i.e. pure CSS only. Like …

Read More
Rounded corners for <input type='text' /> using border-radius.htc for IE

I want to create an input fields with rounded corners. HTML: <div id="RightColumn"> <input type="text" class="inputForm" /> </div> CSS: .inputForm { -moz-border-radius:10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* KHTML */ border-radius: 10px; /* …

Read More