-1

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.

tworley1977
  • 311
  • 2
  • 3
  • 12
  • 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 Dec 07 '16 at 23:42
  • Possible duplicate of [Rounded side, not rounded corners](http://stackoverflow.com/questions/14508148/rounded-side-not-rounded-corners) – David Thomas Dec 08 '16 at 01:03

1 Answers1

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

Sid Savara
  • 161
  • 5
  • If you found an answer to this problem elsewhere on this site then this question is almost certainly a duplicate of that other question. – David Thomas Dec 07 '16 at 23:44
  • You are right it is a duplicate of http://stackoverflow.com/questions/14508148/rounded-side-not-rounded-corners . I don't have a view on my screen to mark as duplicate – Sid Savara Dec 07 '16 at 23:48
  • 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. – tworley1977 Dec 07 '16 at 23:54