0
110
ViewsHTML rectangle box with flatter border at bottom
I want to create a box in html where the bottom is round but not a circle. I know i can add border radius bottom, see https://jsfiddle.net/cxo8usyL/
#square_1 {
width: 100px;
height: 250px;
background: gold;
border-radius: 0px 0px 50px 50px;
}
But the circle at the bottom will turn round every time. Is there a trick to make the circle flatter like in the blue one below? Current implementation (see jsfiddle in yellow), my target is in blue.
Target: 
·
Juan Pablo Isaza
1 answers
Answer question0
You can use elliptical border radius to achieve "round flat" effect. But since you cannot use it for just top/bottom corners, you'd need to combine it with another rectangle on one side.
example solution:
border-radius: 60px / 10px;
·
Juan Pablo Isaza
Report
Answer question