<div> element with a rounded side

Question

I am just brainstorming design ideas and this one has me a little stumped. I want to be able to individually round the sides of a box. Such as three sides of the box are still square and the fourth side is rounded or curved. My own experiments haven't come anywhere close and Google only comes back with rounded corners (border radius). It seems like it should be simple enough, but clearly I am missing something.

Anybody have any thoughts? Thanks.

How does border-radius not solve your problem? What's your HTML, what CSS have you tried? What end result - a picture would probably be useful - do you want? — David Thomas
– David Thomas, Commented Dec 7, 2016 at 23:42

Sid Savara · Accepted Answer · 2016-12-07 23:42:57Z

1

I found another similar answer:

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 Dec 7, 2016 at 23:42

Sid Savara

1615 bronze badges

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

3 Comments

David Thomas Over a year ago

If you found an answer to this problem elsewhere on this site then this question is almost certainly a duplicate of that other question.

Sid Savara Over a year ago

You are right it is a duplicate of stackoverflow.com/questions/14508148/… . I don't have a view on my screen to mark as duplicate

tworley1977 Over a year ago

Thank you for your answer Sidney. I don't know why rounded both corners didn't occur to me, but it didn't. To David and the rest, I apologize.

Collectives™ on Stack Overflow

<div> element with a rounded side

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related